CSS Archives - Artificial Intelligence

What is css and How css Works & Architecture?

Maruti Kr. — Sat, 29 Jul 2023 10:56:47 +0000

What is css ?

CSS stands for Cascading Style Sheets. It is a language used to style web pages. CSS can be used to control the appearance of HTML elements, such as their color, size, font, and layout.

What is top use cases of css ?

The top use cases of CSS include:

1. Styling web pages: It is primarily used for designing and customizing the visual appearance of web pages.

2. Responsive web design: CSS allows you to create responsive layouts that adapt to different screen sizes and devices.

3. Animation and transitions: CSS enables you to add interactive and visually appealing animations to elements on a web page.

4. Print stylesheets: CSS can be used to create styles specifically for print media, allowing you to control how a web page is formatted when it is printed.

5. Custom user interfaces: With CSS, you can style form elements, buttons, and other UI components to create unique and attractive user interfaces.

What are feature of css ?

Features of CSS:

Selectors: CSS uses selectors to target HTML elements for styling.
Box Model: It defines how elements are displayed as boxes with content, padding, border, and margin.
Cascading: Multiple CSS rules can be applied to an element, and the most specific rule takes precedence.
Inheritance: CSS properties can be inherited from parent elements to their children.
Media Queries: Allows the application of specific styles based on the device’s characteristics, such as screen size and resolution.

What is the workflow of css ?

Workflow of CSS:

Create HTML structure: First, you need to create the HTML structure of your web page or application.
Write CSS rules: Then, you write CSS rules in a separate CSS file or within CSS
Output:

Position Fixed:

In position fixed internally the element will take the value and it will be fixed in the position.

In position fixed from the beginning of scrolling the page of the element will not move anywhere, the element will be constant in the given position.

Example:
```
    Document

    



    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint quam, distinctio, debiti
        nulla eos doloribus blanditiis libero at consequatur consectetur. Commodi, natus! Enim, recusandae omnis id
        impedit sequi nulla dolor deserunt consequatur laudantium nesciunt, excepturi, dolorum
        deleniti unde
        ducimus
        minima eum obcaecati nam! Fugit corporis impedit, aut quibusdam iste assumenda blanditiis consectetur quas
        corrupti perspiciatis odio natus neque est explicabo velit ab cum beatae minima hic eligendi sapiente qui rem
        ratione. Amet accusamus aut quibusdam ducimus tempora fugiat molestiae debitis corporis, consequatur commodi
        esse ratione eum eaque, dicta veritatis ex quis est sint? Minus commodi ea rerum animi dolor magnam laudantium
        laboriosam recusandae porro optio corporis tempore perspiciatis, earum quis
        velit cum maiores fugiat doloremque, quod minus expedita quas aspernatur reprehenderit sunt. Eligendi similique
        voluptatum dolorum cupiditate, vero libero delectus exercitationem consectetur et, molestias nesciunt non
        laudantium quaerat veritatis, dolorem provident architecto obcaecati. Hic quibusdam voluptas laudantium libero
        numquam adipisci voluptate? Quam suscipit aut consequuntur ullam officiis voluptate facere culpa doloremque
        repudiandae iste, quae possimus odio, fuga cumque debitis cupiditate! Quo, repellat. Qui repellat, minus illo
        iure voluptatum tenetur nisi dicta ut, quae voluptatibus veniam. Quia tempore suscipit similique fuga sed vitae,
        neque vero dolore a culpa eos quod ullam magnam totam magni consequuntur nihil ducimus explicabo? Id dolore
        reprehenderit quia, vitae excepturi, eligendi assumenda ex vel at nisi quibusdam porro dolores perspiciatis
        dolorum consequatur culpa. Quos, rem accusantium? Voluptatem earum reprehenderit, ipsa pariatur enim, provident
        rerum doloribus, ullam voluptatum harum deserunt! Placeat totam rem aliquam culpa earum repellat neque, velit
        consectetur quo odit explicabo modi animi reiciendis at delectus ratione harum impedit, incidunt omnis. Esse
        eius eum ratione, nobis expedita hic ullam, cumque molestiae odit consequuntur id ad maxime inventore
        distinctio. Error ullam corporis corrupti illum quidem perspiciatis rerum? Voluptatibus molestiae temporibus
        laudantium harum animi non impedit vel, iusto vero quos nam neque ea amet aliquam atque, facilis assumenda?
        Ratione assumenda eligendi, beatae numquam quam inventore quos hic aliquam quas voluptatibus voluptates quo
        rerum blanditiis obcaecati vel magnam consequatur eos debitis ad quibusdam quidem nostrum, perferendis esse
        modi? Alias explicabo dolore quasi est accusamus maxime repellendus id impedit soluta reprehenderit reiciendis
        perferendis corporis, aliquid sed quis in delectus aut dolorum doloribus quos earum voluptatem rerum.
        Necessitatibus voluptate, deserunt cupiditate assumenda expedita incidunt quibusdam excepturi, adipisci ullam
        quisquam facilis mollitia! Necessitatibus maiores repudiandae mollitia odio commodi laboriosam nihil asperiores,
        accusantium, officiis dolores deleniti dolorum, illo molestias accusamus laborum omnis animi numquam quas? Nulla
        odit explicabo doloribus ab iure, a adipisci, autem corporis cum vel, veniam minus animi cumque eos! Placeat
        minus, officiis facere consequatur, facilis explicabo alias fuga sapiente deserunt a quod qui cum. Natus
        reprehenderit assumenda perspiciatis inventore quibusdam tempore atque vel aperiam nostrum cum, ullam placeat
        libero quo aliquam molestiae quam consequuntur, officia numquam modi. Molestias consequatur aperiam id autem,
        recusandae repellat voluptates sapiente similique obcaecati minus rem asperiores facere reprehenderit, quod,
        illum aspernatur distinctio eligendi. Delectus alias reprehenderit recusandae incidunt, provident officia rerum    quam veritatis ipsa! Quas accusamus adipisci animi sunt quasi. Corrupti, sed. Corporis amet error ex ipsa natus
        quibusdam velit, tempore quos tenetur quam excepturi eum omnis nostrum animi at. explicabo nam distinctio labore
        officiis autem cum dicta hic
        magnam, in vel maxime ipsam adipisci ab assumenda repellat. Perspiciatis!
```
Output:

Position Sticky:

In css sticky the element will move in the beginning but when the element will teach to the fived value it will be constant or fixed in that position.

Example:
```
 




    Document

    




    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum accusantium voluptatum vitae at odio, debitis
        est incidunt harum? Magni blanditiis autem at laborum, corrupti deleniti, quae illum reprehenderit animi
        accusamus architecto accusantium quas nulla ab dicta nam, quasi quidem pariatur aliquid cupiditate enim? Vero
        debitis ab quos quaerat, ut vel, porro dignissimos, repellendus illum facilis nostrum consequatur dolore
        Consequuntur, totam at corrupti commodi velit voluptatibus porro illo! Expedita ipsa dignissimos dicta eligendi
        quisquam voluptatibus explicabo, totam natus? Ipsam quisquam debitis repellat quibusdam consectetur. Quos
        repellat repudiandae non amet aut, 
CSS positionsequi commodi dignissimos alias nulla voluptate, quas earum eum aliquid
        exercitationem dolore numquam debitis ea totam libero corrupti molestiae officiis recusandae aspernatur eaque?
        Ipsa magnam architecto, doloribus quos qui, sequi aliquam voluptatem quibusdam quia impedit dolores laudantium
        totam eaque provident voluptates voluptate at ipsam a. Nam consectetur vitae quisquam dignissimos rem tempore
        officia debitis, soluta veniam magni itaque saepe sint tenetur. Ab totam atque sequi, quidem asperiores officia
        aliquid dolores aliquam molestias quo natus quisquam voluptatum. Fugit inventore ratione vitae error et
        
```
Output:

Position Absolute:

By using position absolute we can attach the child element to the nearest relative parent.

For position absolute we need parent child relationship between the element(chain – like structure).

In which parent we want to attached the child element to that parent give position relative and to the child element give position: absolute
```
  
  
  
  
  
  
This heading has an absolute position  
 The heading below is placed 150px from the left and 250px from the top of the page.  
  
  
```
Output:

The post CSS Boarding Style: appeared first on Artificial Intelligence.

CSS Box Model

Maruti Kr. — Tue, 11 Apr 2023 01:51:32 +0000

The CSS box model is a concept that describes how elements are laid out on a web page using rectangular boxes. Each box consists of four main components: content, padding, border, and margin. These components determine the size and position of an element within its container.

There are four Boxes-

Content Box
Paddig Box
Boarder Box
Margin Box

How to create content Box?




    
    CSS Box Model
    


    
    CSS Box
    CSS Box

The post CSS Box Model appeared first on Artificial Intelligence.

Online Job Application Form Using Html and CSS

Maruti Kr. — Sat, 01 Apr 2023 05:28:05 +0000

In this job application form we are using html and css.




    ONLINE JOB APPLICATION FORM
    


    
        PERSONAL INFORMATION
        
          
              
                  FIRST NAME  
                  
                  MIDDLE NAME 
                  
                  LAST NAME  
                  
              
              
                FATHER NAME   
                
                MOTHER NAME   
                
                  
              
              
                  PHONE NUMBER
                  
                  LANDLINE NUMBER   
                
                MOBILE NUMBER   
                
             
             
                  Date Of Birth
                  
                    PLACE OF BIRTH   
                    
              
              
                  GENDER
                  MALE
                  FEMALE
              
              
                  HIGHEST QUALIFICATION
                  
                  YEAR OF PASSING
                  
              
              
                LANGUAGES KNOWN
                ENGLISH
                HINDI
                KANNADA
                TELUGU
                TAMIL
                
            
              
                HOBBIES
                READING BOOKS
                CODING
                BATMINTON
                CYCLINGU
                WACTHING MOVIES
              
              
                  ABOUT YOURSELF
                  
              
              
                  NATIONALITY
                  
                  

                 
                  AADHAR CARD NUMBER   
                  
                  PANCARD NUMBER   
                  
              
            
        
  
  
    EDUCATION DETAILS
    
      
        
        S.NO 
        QUALIFICATION   
        INSTITUTE/UNIVERSITY  
        YEAR OF PASSING  
    
    
    1
    
     
    

   
     2
    
     
    
 
  
    3
   
    
   

      
    


    WORK EXPERIENCE
    
      
        
        S.NO 
        COMPANY
        WORK/ROLE 
        FROM DATE 
        TO DATE
    
    
        1
        
        
        
        
    

   
    2
        
        
        
        
 
  
    3
    
    
    
    

    
  
 
 
    OTHER DETAILS
    
      
        
            JOBTYPE
            PERMANENT
            CONTRACT
            OTHER
        
        
            DATE OF JOINING
            
            TIME OF JOINING
            
        
        
            PREFER JOB LOCATION
            BANGLORE
            MUMBAI
            PUNE
          
           
            WILLING TO RELOCATE
            YES
            NO
        
        
            
            I AM HERE DECLARING THAT ALL THE ABOVE MENTIONED INFORMATION IS TRUE AS PER MY KNOWLEDGE

Output:–

The post Online Job Application Form Using Html and CSS appeared first on Artificial Intelligence.

CSS Selector and Its Types

Maruti Kr. — Fri, 31 Mar 2023 12:43:03 +0000

What is CSS Selector

Selector means choosing an html tag for applying the styles. CSS selectors can be based on the

CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Pseudo Selector
CSS Group Selector

1. CSS Element Selector:

The element selector selects HTML elements based on the element name such as “p” for paragraphs or “h1” for heading 1.







Style will be applied on every paragraph.
Hi
Hello
How are You

Output:

2. CSS Id Selector:

By using id selector we can apply CSS style for same group of html tag. An id is always unique within the page so it is chosen to select a single, unique element.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.








Hello World!
In this paragraph, Not applying the style.

Output:

3. CSS Class Selector:

By using class selector, We can apply same CSS style for multiple html tags.

To select multiple tags we need to use class attributes.

To represent class name, we have to use dot(.).








    This heading is purple and center-aligned.  
    This paragraph is purple and center-aligned.

Output:

4. CSS Group Selector:

Grouping multiple selector is group selector. We use comma(,) for grouping selectors.







CSS Group selector Example
Hello, How are You
This is a paragraph.

Output:

5. Pseudo Selector:

A CSS Pseudo selector is a keyword added to a selector that specifies a special state of the selected elements.

Syntax:

Selector: Pseudo Selector Name
{
Style Name: Value




    
    Pseudo selector
    


    CSS Selector

Note: When cursor touch an output(CSS Selector) , its will change the color.

The post CSS Selector and Its Types appeared first on Artificial Intelligence.

CSS Properties and its types

Maruti Kr. — Fri, 31 Mar 2023 10:13:46 +0000

What is CSS Background

CSS background property is used to set the background color, image, or other properties for an HTML element.

Syntax:

selector {
  background: value;
}

There are 5 CSS background properties used in HTML elements:

background-color
background-image
background-repeat
background-attachment
background-position

1. CSS Background-color:

Background- color is used to sets the color of the background in html document.

For Example:

  
  
  
  
  
  
This is an example of CSS background-color   
Welcome to Cotocus vlogs: Cotocus with the help of technology, trying to resolve the mutilple problems - we are facing in healthcare, tech education, professional services, travel and in digital domain with our products such as MyHospitalnow, DevOpsSchool, Professnow, HolidayLandmark and Wizbrand.

Output:

2. CSS Background-image:

Background-image is used to sets the image to be used as the background.

For Example:

  
  
  
  
  
  
Welcome to Cotocus

Output:

3. CSS Background-repeat:

Background-repeat specifies how the background image should repeat, By default, the background-image property repeats an image both horizontally and vertically.

background-repeat: repeat-x;

  
  
  
  
  
  
Hello World

Output:

background-repeat: repeat-y;

  
  
  
  
  
  
Hello World

Output:

4. CSS Background-attachment:

CSS background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser.

For Example:





    



     Background-attachment Example

    



    



     Background-attachment Example
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.
    This is a fixed background-image. Scroll down the page.

Output:

5. CSS Background-position:

CSS Background-position are used to sets the position of the background image. default, the background image is placed on the top-left of the webpage.

You can set the following positions:

center
top
bottom
left
right

For Example:







This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.
This is background position example, Scroll down the page.

Output:

The post CSS Properties and its types appeared first on Artificial Intelligence.

What is CSS and how many types of CSS?

Maruti Kr. — Wed, 29 Mar 2023 11:28:54 +0000

CSS stand for cascading style sheets. By using CSS we can apply style to the html document. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG and XUL.

In CSS they are three way to write CSS.

Inline
Internal
External

Inline CSS :

By using Inline CSS we can apply the style to the element by using style attribute inside the opening tag.

Example:





This is a heading
This is a paragraph.

Internal CSS :

By using Internal CSS we can apply the style to the element by using style tag, Inside the head tag of html documents.

Syntax:

Example:



       Documents



Good After Noon
Hello World

External CSS :

By using External CSS we can apply the styles and formatting of a web page separate file, his separate file, typically named with a .css extension, is then linked to the HTML document using the tag.

Example:-

External styles are defined within the element, inside the section of an HTML page:




	My Webpage

CSS Comments:

CSS Comments are used to explain or clarify the purpose of code to other developers or to remind yourself of the code’s purpose later on. Comments are single or multiple lines statement and CSS comments start with /* and end with */, And it will be ignored by the browser.

For example:

  
  
 
  
  
  
Hi Welcome to Cotocus  
This statement is styled with CSS.  
CSS comments are ignored by the browsers and not shown in the output.

The post What is CSS and how many types of CSS? appeared first on Artificial Intelligence.

FIRST NAME		MIDDLE NAME		LAST NAME
FATHER NAME		MOTHER NAME
PHONE NUMBER		LANDLINE NUMBER		MOBILE NUMBER
Date Of Birth		PLACE OF BIRTH
GENDER	MALE	FEMALE
HIGHEST QUALIFICATION		YEAR OF PASSING
LANGUAGES KNOWN	ENGLISH	HINDI	KANNADA	TELUGU	TAMIL
HOBBIES	READING BOOKS	CODING	BATMINTON	CYCLINGU	WACTHING MOVIES
ABOUT YOURSELF
NATIONALITY
AADHAR CARD NUMBER		PANCARD NUMBER

JOBTYPE	PERMANENT	CONTRACT	OTHER
DATE OF JOINING		TIME OF JOINING
PREFER JOB LOCATION	BANGLORE	MUMBAI	PUNE
WILLING TO RELOCATE	YES	NO
	I AM HERE DECLARING THAT ALL THE ABOVE MENTIONED INFORMATION IS TRUE AS PER MY KNOWLEDGE

CSS Archives - Artificial Intelligence

What is css and How css Works & Architecture?

What is css ?

What is top use cases of css ?

What are feature of css ?

What is the workflow of css ?

Position Fixed:

Position Sticky:

CSS position

Position Absolute:

This heading has an absolute position

CSS Box Model

How to create content Box?

Online Job Application Form Using Html and CSS

CSS Selector and Its Types

What is CSS Selector

1. CSS Element Selector:

2. CSS Id Selector:

3. CSS Class Selector:

This heading is purple and center-aligned.

4. CSS Group Selector:

CSS Group selector Example

Hello, How are You

5. Pseudo Selector:

CSS Selector

CSS Properties and its types

What is CSS Background

1. CSS Background-color:

This is an example of CSS background-color

2. CSS Background-image:

Welcome to Cotocus

3. CSS Background-repeat:

Hello World

Hello World

4. CSS Background-attachment:

Background-attachment Example

Background-attachment Example

5. CSS Background-position:

What is CSS and how many types of CSS?

Inline CSS :

This is a heading

Internal CSS :

Good After Noon

External CSS :

CSS Comments: