Educational

Category: CSS

  • Colors

    CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e. its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.

    You can specify your color values in various formats. Following table lists all the possible formats −

    FormatSyntaxDescriptionExample
    Keyword<property>: <colorname>CSS has a set of predefined color names that you can use directly.red, blue, green, yellow, black, white, etc.
    Hexadecimal Code#RRGGBBStarts with a hash (#) followed by six hexadecimal digits.#FF0000 – red
    Short Hexadecimal Code#RGBShorter version of hexadecimal format where each of the RGB components is represented by a single digit, and the value is duplicated.#F00 – red
    RGBrgb(red,green,blue)Colors can be defined using the rgb() function, which takes three parameters representing the red, green, and blue values.rgb(0, 0, 255) – blue
    RGBArgba()Similar to RGB, with an additional parameter for the alpha (transparency) value. 0 (fully transparent) and 1 (fully opaque)rgba(0,0,255,0.5) – translucent blue
    HSLhsl()Colors can be defined using the rgb() function which stands for Hue (0 to 360 degree), Saturation (%), and Lightness (%).hsl(120, 100%, 50%) – pure green
    HSLAhsla()Similar to HSL, with an additional parameter for the alpha (transparency) value.hsl(120, 100%, 50%, 0.5) – translucent green
    currentcolor KeywordcurrentcolorIt refers to the value of the color property of the element.color: red; /* Red text color */ border: 10px solid currentcolor; /* Red border color */
    System coloras per OS or browserCSS allows usage of system colors defined by the user’s OS or browser.ButtonText, Window, WindowText

    These formats are explained in more detail in the following sections −

    CSS Colors – Keyword

    CSS supports the color names to be directly passed to the property background-color and color. 140 standard color names are supported by CSS.

    Few of the examples are listed in the table below:

    ColorColor Name
     Black
     Red
     Blue
     Green
     Aquamarine

    Here is an example:

    <html><head><style>
   #colorkeyword{

      background-color: aqua;
  padding: 10px;
       }
</style></head><body><h3>Color Keyword - example</h3><p>As the keyword passed is aqua, the background will appear as aqua colored..</p><div id="colorkeyword">

      This div element has a colored background based on the color keyword passed, i.e aqua.
       </div></body></html>

    CSS Colors – Hexadecimal Codes

    A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB).

    A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.

    Each hexadecimal code will be preceded by a pound or hash sign ‘#’. Following are the examples of hexadecimal notation.

    Note: To specify the hexadecimal codes, you can use upper case or lower case letters.

    ColorColor Hexadecimal Code
     #000000
     #FF0000
     #00FF00
     #0000FF
     #FFFF00
     #00FFFF
     #FF00FF
     #C0C0C0
     #FFFFFF

    Here is an example:

    <html><head><style>
   #hexcode {

      background-color: #00ff00;
  padding: 10px;
    }
</style></head><body><h3>Hexadecimal code - example</h3><p>As the hexadecimal code is #00ff00 the background will appear green.</p><div id="hexcode">

         This div element has a green background.
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Colors - Short Hexadecimal Codes
    




    This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example: #6A7 becomes #66AA77.
    




    A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc Paintshop Pro, or even using Advanced Paint Brush.
    




    Each short hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples of short hexadecimal notation.
    




    Note: To specify the hexadecimal codes, you can use upper case or lower case letters.
    




    ColorShort Hexadecimal Code
     #000
     #F00
     #0F0
     #0FF
     #FF0
     #0FF
     #F0F
     #FFF
    




    Here is an example:
    




    <html><head><style>
   #shorthex {

      background-color: #00f;
  padding: 10px;
       }
</style></head><body><h3>Short Hexadecimal code - example</h3><p>As the short hexadecimal code is #00f the background will appear blue.</p><div id="shorthex">

         This div element has a blue background.
  &lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Colors - RGB Values
    




      

    • This color value is specified using the rgb( ) property.
      • 




    • It takes three values, one each for red, green, and blue.
      • 




    • The value can be an integer between 0 and 255 or a percentage.
      • 

    




    NOTE: All the browsers does not support rgb() property of color so it is recommended not to use it.
    




    Following is the example to show few colors using RGB values.
    




    ColorColor RGB
     rgb(0,0,0)
     rgb(255,0,0)
     rgb(0,255,0)
     rgb(0,0,255)
     rgb(255,255,0)
     rgb(0,255,255)
     rgb(255,0,255)
     rgb(192,192,192)
     rgb(255,255,255)
    




    Here is an example:
    




    <html><head><style>
   #rgbvalue {

      background-color: rgb(255,0,255);
  padding: 10px;
       }
</style></head><body><h3>RGB - example</h3><p>As the rgb(255,0,255) is set the background will appear accordingly.</p><div id="rgbvalue">

      This div element has a colored background based on the rgb values.
       </div></body></html>
    




    CSS Colors - RGBA Values
    




      

    • This color value is specified using the rgba( ) property.
      • 




    • It takes four values, one each for red, green, and blue and the last value as the alpha (transparency) value.
      • 




    • The alpha value can be any value between 0 and 1.
      • 

    




    NOTE: All the browsers do not support rgba() property of color so it is not recommended.
    




    Following is the example to show few colors using RGBA values.
    




    ColorColor RGBA
     rgba(0,0,0,0)
     rgba(255,0,0,0.2)
     rgba(0,255,0,0.3)
     rgba(0,0,255,0.5)
     rgba(255,255,0,0.7)
     rgba(0,255,255,0.1)
     rgba(255,0,255,1)
     rgba(192,192,192,0.4)
     rgba(255,255,255,1)
    




    Here is an example:
    




    <html><head><style>
   #rgbavalue {

      background-color: rgba(255,0,255,0.2);
  padding: 10px;
       }
</style></head><body><h3>RGBA - example</h3><p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of 0.2.</p><div id="rgbavalue">

      This div element has a colored background based on the rgba values.
       </div></body></html>
    




    CSS Colors - HSL Values
    




      

    • This color value is specified using the hsl() function.
      • 




    • HSL stands for hue, saturation and lightness.
      • 




    • Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%).
      • 

    




    Following is the example to show few colors using HSL property.
    




    ColorColor HSL
     hsl(0,0%,50%)
     hsl(255,80%,70%)
     hsl(290,100%,60%)
     hsl(360,70%,20%)
     hsl(89,80%,67%)
    




    Here is an example:
    




    <html><head><style>
   #hslvalue {

      background-color: hsl(355,70%,50%);
  padding: 10px;
    }
</style></head><body><h3>HSL - example</h3><p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values passed.</p><div id="hslvalue">

      This div element has a colored background based on the hsl values hsl(355,70%,50%).
       </div></body></html>
    




    CSS Colors - HSLA Values
    




      

    • This color value is specified using the hsl() function.
      • 




    • HSLA stands for hue, saturation, lightness and alpha.
      • 




    • It takes four values, first for hue, second for saturation, third for lightness and fourth is the alpha (transparency) value.
      • 




    • Hue is represented in degrees (0-360), saturation and lightness are represented as percentages (0% - 100%), and alpha value can be in between 0 and 1.
      • 

    




    Following is the example to show few colors using HSLA property.
    




    ColorColor HSLA
     hsla(0,0%,50%,0.5)
     hsla(255,80%,70%,1)
     hsla(290,100%,60%,0.2)
     hsla(360,70%,20%,0.4)
     hsla(89,80%,67%,0.9)
    




    Here is an example:
    




    <html><head><style>
   #hslavalue {

      background-color: hsla(355,70%,50%,0.4);
  padding: 10px;
       }
</style></head><body><h3>HSLA - example</h3><p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values passed, with high transparency.</p><div id="hslavalue">

      This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).
       </div></body></html>
    




    CSS Colors - currentcolor keyword
    




    The currentcolor keyword signifies the value of the color property of an element. It can be passed to any other styling property using the keyword currentcolor.
    




    Here is an example:
    




    <html><head><style>
   #currcolor {

      color: red;
  border: 5px solid currentcolor;
       }
</style></head><body><h2>The currentcolor Keyword</h2><p>As the currentcolor keyword is used for border after color property is set as red, the border will also appear red.</p><div id="currcolor">

      This div element has a red text color and a red border.
       </div></body></html>
    




    CSS Colors - Building Color Codes
    




    You can build millions of color codes using our Color Code Builder. Check the HTML Color Code Builder.
    




    To use this tool, you would need a Java Enabled Browser.
    




    CSS Colors - Browser Safe Colors
    




    Here is the list of 216 colors which are supposed to be most safe and computer independent colors. These colors vary from hexa code 000000 to FFFFFF. These colors are safe to use because they ensure that all computers would display the colors correctly when running a 256 color palette −
    




    0000000000330000660000990000CC0000FF
    0033000033330033660033990033CC0033FF
    0066000066330066660066990066CC0066FF
    0099000099330099660099990099CC0099FF
    00CC0000CC3300CC6600CC9900CCCC00CCFF
    00FF0000FF3300FF6600FF9900FFCC00FFFF
    3300003300333300663300993300CC3300FF
    3333003333333333663333993333CC3333FF
    3366003366333366663366993366CC3366FF
    3399003399333399663399993399CC3399FF
    33CC0033CC3333CC6633CC9933CCCC33CCFF
    33FF0033FF3333FF6633FF9933FFCC33FFFF
    6600006600336600666600996600CC6600FF
    6633006633336633666633996633CC6633FF
    6666006666336666666666996666CC6666FF
    6699006699336699666699996699CC6699FF
    66CC0066CC3366CC6666CC9966CCCC66CCFF
    66FF0066FF3366FF6666FF9966FFCC66FFFF
    9900009900339900669900999900CC9900FF
    9933009933339933669933999933CC9933FF
    9966009966339966669966999966CC9966FF
    9999009999339999669999999999CC9999FF
    99CC0099CC3399CC6699CC9999CCCC99CCFF
    99FF0099FF3399FF6699FF9999FFCC99FFFF
    CC0000CC0033CC0066CC0099CC00CCCC00FF
    CC3300CC3333CC3366CC3399CC33CCCC33FF
    CC6600CC6633CC6666CC6699CC66CCCC66FF
    CC9900CC9933CC9966CC9999CC99CCCC99FF
    CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
    CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
    FF0000FF0033FF0066FF0099FF00CCFF00FF
    FF3300FF3333FF3366FF3399FF33CCFF33FF
    FF6600FF6633FF6666FF6699FF66CCFF66FF
    FF9900FF9933FF9966FF9999FF99CCFF99FF
    FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
    FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF
    




    CSS Colors - Related Properties
    




    All the properties related to color are listed in the table below:
    




    PropertyDescription
    opacitySets the transparency level of an element.
    hueRepresents the hue angle of an element.
    colorSets the foreground of an element's text and text decoration.
    background-colorSets the color of the background.
    border-colorSets the color of the border of an element.
    box-shadowAdds a shadow effect around an element.
    outline-colorSets the color of the outline around an element.
    text-shadowAdds shadow to the text of an element.

  • Selectors

    CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more.

    The element or elements that are selected by the selector are referred to as subject of the selector.

    CSS Universal Selector

    CSS universal selector is a special selector that selects all the elements in an HTML document. It is denoted by an asterisk mark (*).

    Syntax

    The syntax for the universal selector is as follows:

    *{margin: 0;padding: 0;}

    As per the above syntax, the universal selector is used to apply a margin and padding of 0 to all HTML elements.

    Example

    The following example demonstrates the use of a universal selector (*) to set the font size, background, and text color of the document:

    <html><head><style>
   * {

      background-color: peachpuff;
  color: darkgreen;
  font-size: 25px;
       }
</style></head><body><h1>Universal selector (*)</h1><div>Parent element
   <p>Child paragraph 1</p><p>Child paragraph 2</p></div><p>Paragraph 3</p></body></html>

    CSS Element Selector

    CSS element selector selects and styles specific HTML elements. The element selector is defined by simply using the element’s name in the stylesheet.

    Syntax

    The syntax for the element selector is as follows:

    p{color: green;}h1{text-decoration-line: underline;}

    Example

    The following example demonstrates the use of a type selector to style the heading, paragraph and div element:

    <html><head><style>
   div {

      border: 5px inset gold;
  width: 300px;
  text-align: center;
       }

   p {

      color: green;
       } 

   h1 {

      text-decoration-line: underline;
       }
</style></head><body><div><h1>Type selector</h1><p>div with border and text-aligned to center</p><p>paragraph with green color</p><p>h1 with an underline</p></div></body></html>

    CSS Class Selector

    CSS class selector selects an element with a specific class attribute. The class selector is defined using a period (.) followed by the class name.

    Syntax

    The syntax for the class selector is as follows:

    .style-h1{text-decoration-line: underline;}.style-p{color: green;font-size: 25px;}

    Example

    The following example demonstrates the use of a class selector, where .style-p, .style-h1 and .style-div are class selectors:

    <html><head><style>
   .style-div {

      border: 5px inset gold;
  width: 300px;
  text-align: center;
       }

   .style-p {

      color: green;
  font-size: 25px;
       } 

   .style-h1 {

      text-decoration-line: underline;
       }
</style></head><body><div class="style-div"><h1 class="style-h1">class selector</h1><p class="style-p">class .style-p applied</p><p>No class applied on this p element</p></div></body></html>

    CSS ID Selector

    CSS ID selector selects an element with a specific value for its id attribute. It is denoted by the “#” (hash) symbol.

    Syntax

    The syntax for the ID selector is as follows:

    #style-p{color: green;font-size: 25px;}#style-h1{text-decoration-line: underline;color: red;}

    Example

    The following example demonstrates the use of an id selector, where #style-p, #style-h1 and #style-div are the id selectors applied on the elements:

    <html><head><style>
   #style-div {

      border: 5px inset purple;
  width: 300px;
  text-align: center;
  background-color: lightgoldenrodyellow;
       }

   #style-p {

      color: green;
  font-size: 25px;
       } 

   #style-h1 {

      text-decoration-line: underline;
  color: red;
       }
</style></head><body><div id="style-div"><h1 id="style-h1">ID selector</h1><p id="style-p">id #style-p applied</p><p>No id applied on this p element</p></div></body></html>

    CSS Attribute Selector

    CSS attribute selector selects an element based on a specific attribute or attribute values on an element.

    Syntax

    The syntax for the attribute selector is as follows:

    a[target]{background-color: peachpuff;}

    You can also specify the element with an attribute having a specific value.

    a[href="https://www.tutorialspoint.com"]{background-color: peachpuff;}

    Example

    The following example demonstrates the use of an attribute selector. Here we have changed the style of elements with target attribute:

    <html><head><style>
   a[target] {

      background-color: #04af2f;
  color: white;
  font-size: 2em;
       }
</style></head><body><h2>Attribute selector</h2><p>Styling applied to anchor element with target attribute:</p><a href="#">Tutorialspoint</a><a href="#" target="_blank">google</a><a href="#" target="_self">wikipedia</a></body></html>

    CSS Group Selector

    CSS group selector allow us to apply same style to multiple elements at a time. Name of elements are comma-separated. The group selector keep CSS concise and avoid redundancy.

    Syntax

    The syntax for the group selector is as follows:

    /* Apply same background color for h1 and h2 */h1, h2{background-color: grey;}

    Example

    The following example shows how to use group selectors in CSS. We have set the background color for the headings and other HTML elements with reduced code.

    <html><head><style>

      /* This applies to both &lt;h1&gt; and &lt;h2&gt; elements */
  h1, h2 {
        background-color: grey;           
        padding: 4px;
  }
    

      /*Applies to all paragraphs, elements with class*/
  /*'highlight', and element with ID 'hightlightSpan'*/
  p, .highlight, #hightlightSpan {
        background-color: yellow;
        padding: 10px;
  }
       </style></head><body><h1>CSS Selectors</h1><h2>Group Selectors</h2><p>This is a paragraph.</p><div class="highlight">

         This is div
  &lt;/div&gt;&lt;br&gt;&lt;span id="hightlightSpan"&gt;
     This is span
  &lt;/span&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Pseudo-class Selector
    




    CSS pseudo-class selector styles a specific state of an element, such as :hover is used to style an element when hovered.
    




    Syntax
    




    The syntax for the pseudo-class selector is as follows:
    




    a :hover{background-color: peachpuff;color: green;font-size: 2em;}
    




    Example
    




    The following example demonstrates the use of a pseudo-class selector. The font size, text and background color of the link changes on hovering over it.
    




    <html><head><style>
   a:hover {

      background-color: peachpuff;
  color: green;
  font-size: 2em;
       }
</style></head><body><h2>Pseudo-class selector</h2><p>Styling applied to anchor element with a pseudo-class:</p><a href="#">Tutorialspoint</a></body></html>
    




    CSS Pseudo-element Selector
    




    CSS pseudo-element selector is used to style a specific part of an element rather than the element itself.
    




    Syntax
    




    The syntax for the pseudo-element selector is as follows:
    




    a::before{content:url();}
    




    Example
    




    The following example demonstrates the use of a pseudo-element selector (::before) and (::after):
    




    <html><head><style>

      /* Add and style contents before paragraph */
  p::before {
        content: "Note: ";
        font-weight: bold;
        color: red;
  }
    

      /* Add and style contents after paragraph */
  p::after {
        content: " [Read more]";
        font-style: italic;
        color: blue;
  }
       </style></head><body><h2>Pseudo-element selector</h2><p>This is a paragraph.</p></body></html>
    




    CSS Descendant Selector
    




    CSS descendant selector styles all the tags which are child of a particular specified tag. To mention as descendant, a single space between parent and child element is used.
    




    Syntax
    




    The syntax for the descendant selector is as follows:
    




    div p{color: blue;}
    




    The above code set text color of paragraph tags that are inside div element to blue.
    




    Example
    




    The following example show how to use descendant selector in css. We have changed the text color of the paragraph element that is immediate child of the div element:
    




    <!DOCTYPE html><html lang="en"><head><style>

      div{
     border: 2px solid;
  }
  div p {
     color: blue;
  }
       </style></head><body><div><p>

         This paragraph is inside a div 
     and will be blue.
  &lt;/p&gt;&lt;section&gt;&lt;p&gt;
        This paragraph is inside a 
        section which is inside a 
        div and will also be blue.
     &lt;/p&gt;&lt;/section&gt;&lt;/div&gt;&lt;p&gt;
  This paragraph is outside the div 
  and will not be blue.
       </p></body></html>
    




    CSS Child Selector
    




    CSS child selector selects all the direct child of a particular element. This is denoted by '>' (Greater than) symbol.
    




    Syntax
    




    The syntax for the child selector is as follows:
    




    div > p{color: blue;}
    




    The above code set text color of paragraph tags that are directly inside div element to blue.
    




    Example
    




    The following example shows how to use child selector in css:
    




    <!DOCTYPE html><html lang="en"><head><style>

      div{
     border: 2px solid;
  }
  div &gt; p {
     color: blue;
  }
       </style></head><body><div><p>

            This paragraph is inside a div and 
        will be blue.
     &lt;/p&gt;&lt;section&gt;&lt;p&gt;
           This paragraph is inside a  
           section which is inside a div
           and will not be blue as this 
           is not direct child
        &lt;/p&gt;&lt;/section&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph is outside the div
     and will not be blue.
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Adjacent Sibling Selectors
    




    CSS adjacent sibling selector selects an element that is immediately preceded by a specified element. A plus symbol ( "+" ) is used to denote adjacent sibling.
    




    Syntax
    




    The syntax of adjacent sibling selector is as follows:
    




    h1 + p{margin-top: 0;}
    




    The above code sets top margin of paragraph tag just after h1 tag to 0.
    




    Example
    




    The following example shows how to use adjacent sibling selector in css.
    




    <!DOCTYPE html><html lang="en"><head><style>

      div{
     border: 4px solid;
  }
  div + p {
     color: blue;
  }
       </style></head><body><p>

         This paragraph is above the div 
     and will not be blue
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be blue.
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be blue.
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will not be blue.
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS General Sibling Selector
    




    general sibling selector targets all the element that is preceded by a specified element. The general sibling selector is denoted by tilde symbol ( "~" ).
    




    Syntax
    




    The syntax of general sibling selector is as follows:
    




    h1 ~ p{color: gray;}
    




    The above code sets text color of all the paragraph after h1 tag to gray.
    




    Example
    




    The following example shows how to use general sibling selector in css:
    




    <!DOCTYPE html><html lang="en"><head><style>

      div{
     border: 4px solid;
  }
  div ~ p {
     color: blue;
  }
       </style></head><body><p>

         This paragraph is above the div 
     and will not be blue
  &lt;/p&gt;&lt;div&gt;&lt;p&gt;
        This paragraph is inside a div 
        and will not be blue.
     &lt;/p&gt;&lt;/div&gt;&lt;p&gt;
     This paragraph 1 after the div 
     and will be blue.
  &lt;/p&gt;&lt;p&gt;This paragraph 2 after the 
     div and will be blue.
  &lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Nested Selectors
    




    CSS nesting allows to nest one style rule inside another rule, with the selector of the child rule relative to the selector of the parent rule.
    




    Characteristics
    




    The nesting selector shows the relationship between the parent and child rules.
    




      

    • When the nested selectors are parsed by the browser, it automatically adds a whitespace between the selectors, thus creating a new CSS selector rule.
      • 




    • In situations where the nested rule needs to be attached to the parent rule (without any whitespace), like while using the pseudo-class or compound selectors, the & nesting selector must be prepended immediately to achieve the desired result.
      • 




    • In order to reverse the context of rules, the & nesting selector can be appended.
      • 




    • There can be multiple instances of & nesting selector.
      • 

    




    Syntax
    




    The syntax for the nesting selector is as follows:
    




    nav{& ul{list-style: none;& li{display: inline-block;& a{text-decoration: none;color: blue;&:hover{color: red;}}}}}
    




    Example
    




    The following example demonstrates the use of a nesting selector (&):
    




    <html><head><style>

      #sample {
     font-family: Verdana, Geneva, Tahoma, sans-serif;
     font-size: 1.5rem;
     &amp; a {
        color: crimson;
        &amp;:hover,
        &amp;:focus {
           color: green;
           background-color: yellow;
        }
     }
  }
       </style></head><body><h1>& nesting selector</h1><p id="sample">

      Hover &lt;a href="#"&gt;over the link&lt;/a&gt;.
       </p></body></html>

  • Units

    CSS Units define the measurement system used to specify the values. CSS offers a number of different units for expressing length and measurement. CSS unit is used to specify the property size for a page element or its content.

    There are a number of ways to specify and measure length in CSS. It is used to specify margins, padding, font size, width, height, border, etc.

    For example – font-size: 50px, here number 50 has a suffix px i.e., pixel, it is a CSS measurement unit.

    There should be no whitespace between the number and the unit. The unit can be left out when the value is 0.

    Length Units

    Length units can be categorized into two types:

    • Absolute units: Fixed unit lengths that does not depend on screen width.
    • Relative units: Responsive unit lengths that changes according to screen width.

    Absolute Length Units

    These units are categorized as fixed-length units, which means that lengths specified with absolute units maintain an exact, unchanged size on the screen.

    These units prove to be very effective when the browser has comprehensive information about the properties of the screen, the printer being used, or other appropriate user agents.Height: 2pxHeight: 2cmHeight: 2inHeight: 2pt

    The following table contains all the types of absolute units:

    UnitDescriptionEquivalent valueExample
    mmRefers to millimeter, it is used to specify the measurements in millimeters.1mm = 1/10th of 1cmfont-size: 10mm;
    cmRefers to centimeter, it is used to specify the measurements in centimeters.1cm = 37.8px = 25.2/64infont-size: 5cm;
    QRefers to Quarter-millimeters, it is used to specify the measurements in centimeters.1Q = 1/40th of 1cmfont-size: 5Q;
    inRefers to inches, it is used to specify the measurement in inches.1in = 2.54cm = 96pxfont-size: 1in;
    ptRefers to point, it is used to specify the measurements in points.1pt = 1/72 of 1infont-size: 20pt;
    pcRefers to picas, it is used to specify the measurement in picas.1pc = 1/6th of 1inwidth: 6pc;
    pxRefers to pixels, it is used to specify the measurement in pixels.1px = 1/96th of 1infont-size: 15px;

    Absolute units prove valuable for projects where responsiveness is not a priority. However, they are less beneficial for responsive websites because they do not adjust when screen dimensions change.

    Example

    Here is an example of absolute units (mm, cm, in, Q) used for font sizes:

    <html><head><style>

        .unit-mm {
        font-size: 5mm;
    }
    .unit-cm {
        font-size: 1cm;
    }
    .unit-inch {
        font-size: 0.5in;
    }
    .unit-quarter {
        font-size: 40Q;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="unit-mm"&gt; Font size 5mm &lt;/h1&gt;&lt;h1 class="unit-cm"&gt; Font size 1cm &lt;/h1&gt;&lt;h1 class="unit-inch"&gt; Font size 0.5inch &lt;/h1&gt;&lt;h1 class="unit-quarter"&gt; Font size 40Q &lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    Relative Length Units
    




    Relative length units are measured in relation to other elements or viewport of the screen.
    




    Relative units are great for styling responsive websites because they can be adjusted proportionally based on window size or parent elements. These units define lengths relative to other length properties.Height: 3emHeight: 3exHeight: 3lhHeight: 3vh
    




    The following table contains all the types of relative units:
    




    UnitDescriptionExample
    emRelative to the font-size of the element.font-size: 4em;
    exRelative to the x-height of the current font.font-size: 4ex;
    chRelative to width of the "0".font-size: 4ch;
    remRelative to font-size of the root element.font-size: 2rem;
    lhIt is relative to the line height of the element.font-size: 4lh;
    rlhIt is relative to the line height of the root element.font-size: 4rlh;
    vhIt is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport.font-size: 4vh;
    vwIt is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport.width: 4vw;
    vminIt is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension.width: 4vmin;
    vmaxIt is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension.width: 4vmax;
    vbIt is relative to the size of the initial containing block in the direction of the root element's block axis. 1vb = 1% of containing block's size (block axis).font-size: 4vb;
    viIt is relative to the size of the initial containing block in the direction of the root element's inline axis. 1vb = 1% of containing block's size (inline axis).font-size: 4vi;
    svw, svhIt is relative to the width and height of the smaller viewport. 1svw = 1% or 1/100 of the smaller viewport's width and 1svh = 1% or 1/100 of the smaller viewport's height.width: 40svw; height: 40svh;
    lvw, lvhIt is relative to the width and height of the larger viewport. 1lvw = 1% or 1/100 of the larger viewport's width and 1lvh = 1% or 1/100 of the larger viewport's height.width: 40lvw; height: 40lvh;
    dvw, dvhIt is relative to the width and height of the dynamic viewport. 1dvw = 1% or 1/100 of the dynamic viewport's width and 1dvh = 1% or 1/100 of the dynamic viewport's height.width: 40dvw; height: 40dvh;
    




    Example
    




    Here is an example of relative units (em, rem, vw, vh, %) used for font sizes:
    




    <html><head><style>

        .unit-em {
        font-size: 2em;
    }
    .unit-rem {
        font-size: 1.5rem;
    }
    .unit-vw {
        font-size: 5vw;
    }
    .unit-vh {
        font-size: 5vh;
    }
    .unit-percent {
        font-size: 150%;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h1 class="unit-em"&gt;Font size 2em &lt;/h1&gt;&lt;h1 class="unit-rem"&gt;Font size 1.5rem &lt;/h1&gt;&lt;h1 class="unit-vw"&gt;Font size 5vw &lt;/h1&gt;&lt;h1 class="unit-vh"&gt;Font size 5vh &lt;/h1&gt;&lt;h1 class="unit-percent"&gt;Font size 150% &lt;/h1&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    

    Units px (Pixel) and em (indicates size relative to the size of the font) are two of the measurement units of length. In order to convert px to em, try our free CSS - PX to EM Converter.

  • Types of CSS

    CSS stands for “Cascading Style Sheet”. It is a style sheet language used to control the layout and other visual aspects of the web pages. CSS plays an important role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.

    There are three types of CSS which are mentioned below.

    • Inline CSS
    • Internal CSS
    • External CSS

    1. Inline CSS

    Inline CSS is applied directly to an HTML element using the style attribute. It has the highest priority among the three methods.

    Example 1

    In this example we have changed the text color using color property and font of the written text using inline CSS properties.

    <p style="color: #04af2f; font-family: Verdana, sans-serif;">

    This line is an inline-styled paragraph.
    </p>

    Example 2

    In this example we have changed the background color, height, width and text color of the div element using inline CSS properties.

    <div style="background-color: #04af2f;color: white;height: 100px;width: 250px">

    This line is an inline-styled paragraph.
    </p>

    2. Internal CSS

    Internal CSS is defined within the <style> tag inside the <head> section of an HTML document.

    Example 1

    In this example we have changed the text color and font of the written text using internal CSS properties.

    <!DOCTYPE html>
<html lang="en">

<head>

    &lt;style&gt;
    p{color: #04af2f;font-family: Verdana, sans-serif;}
&lt;/style&gt;
    </head>

<body>

    &lt;p&gt;This line is styled using internal CSS.&lt;/p&gt;
    </body>

</html>

    Example 2

    In this example we have changed the background color, height, width and text color of the div element using internal CSS properties.

    <!DOCTYPE html>
<html lang="en">

<head>

    &lt;style&gt;
    p{background-color: #04af2f;color: white;height: 100px;width: 250px;}
&lt;/style&gt;
    </head>

<body>

    &lt;p&gt;This line is styled using internal CSS.&lt;/p&gt;
    </body>

</html>

    3. External CSS

    External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the recommended method for large projects as it improves maintainability.

    Example

    Here is an example of External CSS having separate files for HTML and CSS.

    HTML File

    <!-- HTML file --><head><link rel="stylesheet" href="styles.css"></head><body><p>This line is styled using external CSS.</p></body>

    CSS File

    /* styles.css */p{color: #04af2f;font-family: Verdana, sans-serif;}

    Note: The specificity order for above three types of CSS is as follows: Inline CSS > Internal CSS > External CSS.

  •  Inclusion

    You need to include the CSS file in your HTML document before using it. There are multiple ways to include CSS in an HTML file, such as writing inline CSS, internal CSS, or including a CSS file.

    Styles can be associated with your HTML document in different ways, such as:

    • Inline CSS − The CSS styling is placed inside an HTML element tag, which has an effect only on that element.
    • Internal CSS − The CSS styling is placed inside the <style> tag, under the <head> tag.
    • External CSS − The CSS styling is placed in an external file (.css extension) inside the <link> tag, under the <head> tag.

    Embedded / Inline CSS – <style> Attribute

    You can use style attribute of any HTML element to define style rules. These rules will be applied to that element only.

    Syntax

    Here is the generic syntax −

    <element style = "...style rules....">

    The value of style attribute is a combination of style declarations separated by semicolon (;).

    Example

    The following example demonstrates the use of inline css styling:

    <html><head></head><body><div style = "border: 5px inset gold; background-color: black; width: 300px; text-align: center;"><h1 style = "color:#36C;">Hello World !!!</h1><p style = "font-size: 1.5em; color: white;">This is a sample CSS code.</p></div></body></html>

    Internal CSS – <style> Element

    You can put your CSS rules into an HTML document using the <style> element. This tag is placed inside the <head>…</head> tag. Rules defined using this syntax will be applied to all the elements available in the document.

    Syntax

    Here is the generic syntax −

    <head><style type = "text/css">

      h1 {
     color: #36CFFF; 
  }
    

      p {
     font-size: 1.5em;
     color: white;
  }
    

      div {
     border: 5px inset gold;
     background-color: black;
     width: 300px;
     text-align: center;
  }
       </style></head>

    Example

    The same style is applied in the following example:

    <html><head><style type = "text/css">

      h1 {
     color: #36CFFF; 
  }
    

      p {
     font-size: 1.5em;
     color: white;
  }
    

      div {
     border: 5px inset gold;
     background-color: black;
     width: 300px;
     text-align: center;
  }
       </style></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>

    Attributes associated with <style> elements are −

    AttributePossible ValuesDescription
    typetext/cssSpecifies the style sheet language as a content-type (MIME type). This is a required attribute.
    mediascreenttytvprojectionhandheldprintbrailleauralallSpecifies the device the document will be displayed on. Default value is all. This is an optional attribute.

    External CSS – <link> Element

    The <link> element can be used to include an external stylesheet file in your HTML document.

    An external style sheet is a separate text file with .css extension. You can define all the style rules in this text file and include this file in any HTML document using the <link> element.

    Syntax

    Here is the generic syntax of including external CSS file −

    <head><link type = "text/css" href = "..." media = "..." /></head>

    Attributes associated with <style> elements are −

    AttributePossible ValuesDescription
    typetext cssSpecifies the style sheet language as a content-type (MIME type). This attribute is required.
    hrefURLSpecifies the style sheet file having style rules. This attribute is required.
    mediascreenttytvprojectionhandheldprintbrailleauralallSpecifies the device the document will be displayed on. Default value is all. This is an optional attribute.

    Create a style sheet file with a name ext_style.css having the following rules −

       h1 {

      color: #36CFFF; 
       }

   p {

      font-size: 1.5em;
  color: white;
       }

   div {

      border: 5px inset gold;
  background-color: black;
  width: 300px;
  text-align: center;
       }

    Example

    Now you can include this file ext_style.css in any HTML document as follows −

    <head><link type = "text/css" href = "ext_style.css"/></head>

    Following example demonstrates how to include an external css file in an HTML file:

    <html><head><link type = "text/css" href = "ext_style.css"/></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>

    Imported CSS – @import Rule

    The @import is used to import an external stylesheet in a manner similar to the <link> element. The only key point to remember is, the @import rule must be declared on top of the document. Here is the generic syntax of @import rule.

    Syntax

    Refer the following two css files − style.css and demostyle.css

    style.css

    body {
   background-color: peachpuff;
}

    demostyle.css

    @import url("style.css");

h1 {

      color: #36CFFF; 
       }

p {

      font-size: 1.5em;
  color: white
    }

div {

      border: 5px inset gold;
  background-color: black;
  width: 300px;
  text-align: center
    }

    You just need to include the stylesheet, that has @import rule defined, in the <link> tag in the HTML document as follows −

    <head><link type = "text/css" href = "demostyle.css"></head>

    Example

    Following example demonstrates the use of @import rule, where one stylesheet can be imported into another stylesheet:

    <html><head><link type = "text/css" href = "demostyle.css"></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>

    CSS Rules Overriding

    We have discussed different ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule.

    • Any inline style sheet takes highest priority. So, it will override any rule defined in <style>…</style> tags or rules defined in any external style sheet file.
    • Any rule defined in <style>…</style> tags will override rules defined in any external style sheet file.
    • Any rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.

    CSS Comments Inclusion

    Many times, you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You can simple put your comments inside /*…..this is a comment in style sheet…..*/.

    You can use /* ….*/ to comment multi-line blocks.

    Example

    <html><head><style>

      h1 {
     color: #36CFFF; 
  }
    

      p {
     font-size: 1.5em;
     color: red;
     /* This is a single-line comment */
     text-align: center;
  }
  
  div {
     border: 5px inset gold;
     /* This is a multi-line comment
     background-color: black;
     width: 300px;
     text-align: center;
     */
  }
       </style></head><body><div><h1>Hello World !!!</h1><p>This is a sample CSS code.</p></div></body></html>

  • Syntax

    CSS stands for Cascade Style Sheet is popular stylesheet language used to design an interactive webpage. In this tutorial we will learn CSS syntax and usages of CSS along with HTML.

    CSS Syntax

    Following is the syntax of styling using CSS.

    selector{property: value;}
    • Selector: CSS selectors are used to select the HTML element or groups of elements you want to style on a web page.
    • Property: A CSS property is an aspect or characteristic of an HTML element that can be styled or modified using CSS, such as color, font-size, or margin.
    • Value: Values are assigned to properties. For example, color property can have value like red, green etc.

    For Example:

    Syntax

    Multiple Style Rules

    If you want to define multiple rules for a single selectors you can specify those in single block separated by a semicolon (;).

    Syntax

    selector{property1: value1;property2: value2;property3: value3;}

    Now let us look an example for styling using CSS.

    Example

    <!DOCTYPE html><html><head><style>

        /* Style all the paragraphs */
    p {
        background-color: black;
        color: white; 
        padding: 5px;
    }
    

        /* Style all elements with class 'special' */
    .special {
        color: lightblue; /* Change text color */
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;
    This a normal paragraph...
&lt;/p&gt;&lt;br&gt;&lt;p class="special"&gt;
    This is a paragraph with class special...
&lt;/p&gt;&lt;br&gt;&lt;div class="special"&gt;
    This is a div with class special...
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    CSS Selectors Syntax
    




    CSS Selectors are used to select the HTML elements you want to style on a web page. They allow you to target specific elements or groups of elements to apply styles like colors, fonts, margins, and more. Different types of selectors are mentioned below:
    




    Universal Selector
    




    Universal selectors select and apply styles to all elements in an HTML document.
    




    *{font-family: Verdana, sans-serif;color: green;}
    




    Element Selectors
    




    Element selectors select specific HTML elements.
    




    h1{color: #04af2f;}
    




    Class Selectors
    




    Class selectors select and style an element with a specific value for its class attribute.
    




    .myDiv{color: #04af2f;}
    




    Id Selectors
    




    Id selectors select a single element with a particular value for the id attribute.
    




    #myDiv{color: #04af2f;}
    




    Attribute Selectors
    




    Attribute selectors select an element based on a specific attribute value.
    




    a[target]{background-color: peachpuff;}
    




    Example: This example demonstrates the types of selectors mentioned above.
    




    <!DOCTYPE html>
<html lang="en">
<head>

    &lt;title&gt;CSS Selector&lt;/title&gt;
&lt;style&gt;
    *{background-color: #04af2f;color: white;}h3{text-align: center;}#myDiv{height: 200px;width: 200px;background-color: antiquewhite;color: black;}.para{border: 1px solid black;}a[href]{font-size: 2em;color: red;}
&lt;/style&gt;
    </head>
<body>

    &lt;h3&gt;CSS selectors Example&lt;/h3&gt;
&lt;div id="myDiv"&gt;This is a div element.&lt;/div&gt;
&lt;p class="para"&gt;This is a paragraph element.&lt;/p&gt;
&lt;a href="/css/css_padding.htm" target="_blank"&gt;This is a Link&lt;/a&gt;
    </body>
</html>

    




    CSS Grouping and Nesting Syntax
    




    Grouping and nesting selectors allow us to apply the same style to multiple elements at a time.
    




    CSS Grouping Selector Syntax
    




    Grouping selectors are comma-separated and used to select multiple elements and style them at a time.
    




    div, p{background-color: #04af2f;color: white;}
    




    CSS Nesting Syntax
    




    Nesting allows the nesting of one specific style rule within another.
    




    div p{background-color: #04af2f;color: white;font-size: 20px;letter-spacing: 1px;}
    




    CSS Pseudo-Classes & Pseudo-Elements Syntax
    




    Pseudo-class and pseudo-element, both select specific types of elements. The pseudo class defines the style for a specific state while the pseudo element targets a specific part of an element./p>
    




    CSS Pseudo-Element Syntax
    




    CSS pseudo-element styles specific parts of an element.
    




    p:before{content:"NOTE:";font-weight: bold;}
    




    CSS Pseudo-Class Syntax
    




    CSS pseudo-class in CSS is used to select and style elements based on their state.
    




    a:hover{color: red;}
    




    CSS Inclusion Syntax
    




    CSS can be used in any HTML document using three different methods which are: inline CSS, internal CSS, and external CSS.
    




    Inline CSS Syntax
    




    Inline CSS are used directly within HTML tags.
    




    <div style="color: #04af2f;">Welcome to TutorialsPoint.</p>
    




    Internal CSS Syntax
    




    Internal CSS is used within the head section of an HTML document using a style tag.
    




    <style>

    body {
    background-color: #04af2f;
}
    </style>
    




    External CSS Syntax
    




    External CSS is written in a separate file having a .css extension and linked to the HTML document using link tag.
    




    <link rel="stylesheet" type="text/css" href="style.css">
    




    CSS Media Queries Syntax
    




    CSS media queries apply different CSS styles based on the screen size, resolution, and other characteristics and are often used for creating responsive designs.
    




    @media (max-width: 700px){body{background-color: #04af2f;}}
    




    CSS Variables Syntax
    




    CSS Variables allows to store and reuse values throughout the CSS program.
    




    :root{--main-color: #04af2f;}
    




    CSS Comments Syntax
    




    CSS comments add an explanatory note about the code.
    




    /* This is a single line CSS comment *//* This is 
a multi-line
CSS comment 
*/

  • Introduction

    CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension.

    What is CSS?

    • CSS stands for Cascading Style Sheets, used to describe the presentation and design of a web pages.
    • Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used.
    • CSS can control the layout of multiple web pages all at once.

    CSS Styling Example

    Following is layout of a webpage, click the button below to add CSS styling to the page and see difference between a webpage with and without CSS.Add CSS

    Webpage Layout

    Sidebar

    Sidebar content here.

    Click to Add Style

    You can toggle between styled version and unstyled version of this page using above button.

    © 2024 Webpage Layout. All rights reserved.

    Why Use CSS?

    • CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages.
    • Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
    • Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
    • Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can get a far better look to your HTML page.
    • Multiple Device Compatibility: For the same HTML document, different versions of a website can be presented for different screen widths
    • Global Web Standards: Now most of the HTML attributes are being deprecated and it is being recommended to use CSS.

    CSS Syntax

    Syntax of CSS consist of selectors and declaration used to apply styles to HTML elements.

    selector{property: value;}
    • The selector targets the HTML element/elements that you want to style.
    • The declaration block contains one or more declarations enclosed in curly braces {}.
    • Each declaration consists of a property and a value separated by a colon :. Declarations are separated by semicolons ;.

    There are several types of selectors available in CSS, commonly used selectors are classes, IDs and tags. To know complete list of selectors visit CSS Selectors article.

    CSS History and Versions

    Current version of CSS3 and early versions were CSS1 and CSS2. As of now CSS is continuesly evolving and adapting new capabilities that full fills the current website’s requirements.

    CSS-versions

    Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags.

    CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables.

    CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2.

    CSS3 Modules

    CSS3 Modules are having old CSS specifications as well as extension features.

    • Selectors
    • Box Model
    • Backgrounds and Borders
    • Image Values and Replaced Content
    • Text Effects
    • 2D and 3D Transformations
    • Animations
    • Multiple Column Layout
    • User Interface

    For a quick guide on types of style used in CSS, visit our CSS cheat-sheet

  • Roadmap

    This Roadmao provides you the complete steps to use CSS styles to build web applications. This will helps you to learn the core concepts of CSS. You will learn core concepts, advanced techniques, and best practices by following mentioned topics.

    What is a Tutorial Roadmap?

    Tutorial Roadmap typically covers the journey from beginner to advanced user, including key concepts, practical applications, and best practices.

    CSS Roadmap

    Master CSS from beginner to expert with our comprehensive 2024 roadmap. Learn essential concepts, modern techniques, and best practices. Includes practical examples, learning resources, and a structured timeline for becoming a CSS expert.

    CSS Roadmap

    CSS Introduction

    CSS Selectors

    CSS Colors

    CSS Opacity

    CSS Backgrounds

    CSS Box Model

    CSS Syntax

    CSS Inclusion

    CSS Text

    CSS Fonts

    CSS Styling Lists

    CSS Display

    CSS Visibility

    CSS Positioning

    CSS Float

    CSS Flexbox

    CSS Grid

    CSS Media Queries

    CSS Transition

    CSS Transformation

    CSS Animation

    CSS Units

    Types of Selectors

    CSS Comments

    CSS Color Reference

    CSS Background Color

    CSS Background Image

    Background Image Properties

    CSS Margins

    CSS Paddings

    CSS Borders

    CSS Dimension

    Text Properties

    Font Properties

    List Style Properties

    Display Property Values

    Position Properties

    Flex Container Properties

    Flex Items Properties

    Grid Properties

    How this Roadmap Can help you?

    This Roadmap will help you to calculate the time will be required to complete this tutorial by visualizing the steps when you can implement a strategic plan and to better understand the concepts. After completing the mentioned topics keep practicing to improve yourself.

  • CSS Tutorial

    What is CSS

    CSS is the acronym for “Cascading Style Sheet”. It’s a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.

    CSS Versions

    Since the inception of CSS, several versions have came into existence. Some of the notable versions include:

    • CSS1 (Cascading Style Sheets Level1) – The initial version of CSS, released in December 1996. CSS1 provided basic styling capabilities for HTML documents, including properties for text, colors, backgrounds, margins, and borders.
    • CSS2 (Cascading Style Sheets Level2) – Released in May 1998, CSS2 introduced new features such as positioning, z-index, media types, and more advanced selectors like attribute selectors and child selectors.
    • CSS2.1 – The version 2.1, published as a W3C Recommendation in June 2011, clarified and refined CSS2, addressing inconsistencies and ambiguities in the specification. CSS2.1 focused on improving interoperability among web browsers.
    • CSS3 (Cascading Style Sheets Level 3) – CSS3 is a collection of modules that extend the capabilities of CSS. It introduces numerous new features and enhancements, including advanced selectors, multiple column layouts, animations, transformations, gradients, shadows, and more.
    • CSS4 (Cascading Style Sheets Level 4) – CSS4 is an ongoing effort to extend CSS3 with new features and enhancements.

    Each version of CSS builds upon the previous ones, adding new features and refining existing capabilities to meet the evolving needs of web developers and designers. CSS is referred as just CSS now, without a version number.

    Types of CSS

    1. Inline CSS: Inline CSS is applied directly to an HTML element using the style attribute. It has the highest priority among the three methods.
      Example
    2. <p style=”color: blue; font-size: 16px;”> This line is an inline-styled paragraph. </p>
    3. Internal CSS: Internal CSS is defined within the <style> tag inside the <head> section of an HTML document.
      Example
    4. <head><style> p { color: green; font-size: 18px; } </style></head><body><p>This line is styled using internal CSS.</p></body>
    5. External CSS: External CSS is written in a separate .css file and linked to the HTML document using the <link> tag. This is the recommended method for large projects as it improves maintainability.
      Example<!– HTML file –><head><link rel=”stylesheet” href=”styles.css”></head><body><p>This line is styled using external CSS.</p></body>/* styles.css */ p { color: red; font-size: 20px; }

    Advantages of Using CSS

    • Responsive design – CSS offers features like media queries that enable developers to create responsive layouts that adapt to different screen sizes and devices, ensuring a consistent user experience.
    • Flexibility and Control – CSS provides precise control over the presentation of HTML elements, allowing developers to customize layout, typography, colors, and other visual properties.
    • Consistency and Reusability – Developers can ensure consistency across the entire website, by defining styles in a central CSS file. Styles can be reused across multiple pages, reducing redundancy and making updates easier.
    • Search Engine Optimization (SEO) – CSS can be used to structure content in a way that improves search engine visibility.
    • Ease of Maintenance – Centralized CSS files make it easier to maintain and update styles across a website. Changes can be applied globally, ensuring uniformity and reducing the risk of inconsistencies.
    • Faster Page Loading – External CSS files can be cached by browsers, resulting in faster page loading times for subsequent visits to a website. This caching mechanism reduces server load and bandwidth consumption.

    Components of CSS

    CSS works by associating rules with HTML elements. A CSS rule contains two main parts:

    • a selector which specifies the HTML element(s) to style.
    • a declaration block which contains one or more declarations separated by semicolons.

    Each declaration includes a property name and a value, specifying the aspect of the element’s presentation to control.

    CSS Example

    Just to give you a little excitement about CSS, here is a sample CSS snippet for your reference.

    <html><head><title>CSS Tutorial</title><style>

      h1 {
     color: #36CFFF; 
  }
    

      p {
     font-size: 1.5em;
     color: white;
  }
    

      div {
     border: 5px inset gold;
     background-color: black;
     width: 300px;
     text-align: center;
  }
       </style></head><body><div><h1>Hello World!</h1><p>This is a sample CSS code.</p></div></body></html>

    In the above CSS snippet:

    • h1, p, and div are the selectors that target the <h1>, <p>, and <div> elements.
    • color, font-size, border, background-color, width, and text-align are the properties.
    • #36CFFF, 1.5em, white, 5px inset gold, black, 300px, and center are the corresponding values passed to these properties.

    For a quick glance of CSS properties and features, check our CSS Reference page.

    Getting Started with CSS

    Below listed topics are most important to learn in CSS from basics to advance, after completing these topics you will able to style your HTML document as you want. We highly recommend you to do practice with CSS by modifying the provided code in this tutorial.

    CSS Basics

    Understanding the basics is important whenever you are learning something new. So before diving deep into CSS please know fundamentals of CSS.

    • CSS Introduction
    • CSS Syntax
    • CSS Selectors
    • CSS Inclusion
    • CSS Comments

    CSS Properties

    CSS properties and selectors are the main thing in CSS, without the properties there is no ways to define the styling of any HTML element. So better to know most frequently used properties in one go will help you to work with CSS.

    • CSS Background
    • CSS Border
    • CSS Display
    • CSS Float
    • CSS Font
    • CSS Line Height
    • CSS Margin
    • CSS Opacity
    • CSS Overflow
    • CSS Padding
    • CSS Position
    • CSS Align
    • CSS White Space
    • CSS Width
    • CSS Height
    • CSS Outline
    • CSS Visibility
    • CSS Counter

    You can get complete list of CSS Properties on the attached link.

    CSS Advanced

    After completing the above two section you can proceed with the advance part of this tutorial, these topics will helps you to make an actual website layout.

    • CSS Animation
    • CSS Gradient
    • CSS Transition
    • CSS Tooltips
    • CSS Arrow
    • CSS Grid
    • CSS FlexBox
    • CSS Responsive Design
    • CSS @Media Query
    • CSS 2D Transforms
    • CSS 3D Transforms
    • CSS Pseudo Classes

    CSS Practice

    The following are some of the important links to practice CSS:

    • CSS Interview Questions
    • CSS Online Quiz
    • CSS Online Test
    • CSS Mock Test
    • CSS Cheatsheet

    Prerequisites to Learn CSS

    Before using CSS extensively, it is essential to have a baisc understanding of the following prerequisites:

    • HTML – A fundamental understanding of HTML markup is necessary. This includes knowledge of HTML elements, attributes, tags, and their hierarchical structure.
    • Text Editors or Integrated Development Environments (IDEs) – In order to write to write your CSS code, a text editor or an IDE is required. Popular choices include Visual Studio Code, Sublime Text, Atom, or integrated editors within IDEs like IntelliJ IDEA or Eclipse.
    • Browser Developer Tools – Familiarizing yourself with browser developer tools can help you understand how styles are applied and troubleshoot layout issues.
    • Basic Environment Setup – Basic understanding of creating and managing files, along with saving and organizing them on your computer.

    If you are new to HTML and XHTML, then we would suggest you to go through our HTML or XHTML Tutorial first.

    Target Audience: Who Should Learn CSS?

    This tutorial has been prepared for beginners and professionals to help them understand the basics to advanced concepts of CSS. After completing this tutorial, you will find yourself at a great level of expertise in CSS, from where you can take your web design skills to the next level.

    Frequently Asked Questions about CSS

    There are some very Frequently Asked Questions(FAQ) about CSS, this section tries to answer them briefly.What is the Full form of CSS?

    chevron

    What is the purpose of CSS?

    chevron

    Is there any alternative of CSS?

    chevron

    What is the current version of CSS?

    chevron

    Is there any disadvantage of CSS?

    chevron

    Yes, CSS can’t provide maximum security, or you can say the purpose is not to provide that kind of security for your website. Lots of browsers required different properties for the same functionality(cross-browser issue).

  • CSS3 Animations

    Creating CSS3 Animations

    In the previous chapter you’ve seen how to do simple animations like animating a property from one value to another via CSS3 transitions feature. However, the CSS3 transitions provide little control on how the animation progresses over time.

    The CSS3 animations take it a step further with keyframe-based animations that allow you to specify the changes in CSS properties over time as a set of keyframes, like flash animations. Creating CSS animations is a two step process, as shown in the example below:

    • The first step of building a CSS animation is to defining individual keyframes and naming an animation with a keyframes declaration.
    • The second step is referencing the keyframes by name using the animation-name property as well as adding animation-duration and other optional animation properties to control the animation’s behavior.

    However, it is not necessary to define the keyframes rules before referencing or applying it. The following example will show you how to animate a <div> box horizontally from one position to another using the CSS3 animation feature.

    Example

    .box {

    width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: moveit;
animation-duration: 2s;
    }
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {

    from {left: 0;}
to {left: 50%;}
    }
 
/* Standard syntax */
@keyframes moveit {

    from {left: 0;}
to {left: 50%;}
    }

    You must specify at least two properties animation-name and the animation-duration (greater than 0), to make the animation occur. However, all the other animation properties are optional, as their default values don’t prevent an animation from happening.

    Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable.

    Defining Keyframes

    Keyframes are used to specify the values for the animating properties at various stages of the animation. Keyframes are specified using a specialized CSS at-rule — @keyframes. The keyframe selector for a keyframe style rule starts with a percentage (%) or the keywords from (same as 0%) or to (same as 100%). The selector is used to specify where a keyframe is constructed along the duration of the animation.

    Percentages represent a percentage of the animation duration, 0% represents the starting point of the animation, 100% represents the end point, 50% represents the midpoint and so on. That means, a 50% keyframe in a 2s animation would be 1s into an animation.

    Example

    .box {

    width: 50px;
height: 50px;
margin: 100px;
background: red;
position: relative;
left: 0;
/* Chrome, Safari, Opera */
-webkit-animation-name: shakeit;
-webkit-animation-duration: 2s;
/* Standard syntax */
animation-name: shakeit;
animation-duration: 2s;
    }
 
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {

    12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
    }
 
/* Standard syntax */
@keyframes shakeit {

    12.5% {left: -50px;}
25% {left: 50px;}
37.5% {left: -25px;}
50% {left: 25px;}
62.5% {left: -10px;}
75% {left: 10px;}
    }

    Animation Shorthand Property

    There are many properties to consider when creating the animations. However, it is also possible to specify all the animations properties in one single property to shorten the code.

    The animation property is a shorthand property for setting all the individual animation properties at once in the listed order. For example:

    Example

    .box {

    width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: repeatit 2s linear 0s infinite alternate;
/* Standard syntax */
animation: repeatit 2s linear 0s infinite alternate;
    }
 
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {

    from {left: 0;}
to {left: 50%;}
    }
 
/* Standard syntax */
@keyframes repeatit {

    from {left: 0;}
to {left: 50%;}
    }

    Note: If any value is missing or not specified, the default value for that property will be used instead. That means, if the value for animation-duration property is missing, no transition will occur, because its default value is 0.

    CSS3 Animation Properties.

    The following table provides a brief overview of all the animation-related properties.

    PropertyDescription
    animationA shorthand property for setting all the animation properties in single declaration.
    animation-nameSpecifies the name of @keyframes defined animations that should be applied to the selected element.
    animation-durationSpecifies how many seconds or milliseconds that an animation takes to complete one cycle of the animation.
    animation-timing-functionSpecifies how the animation will progress over the duration of each cycle i.e. the easing functions.
    animation-delaySpecifies when the animation will start.
    animation-iteration-countSpecifies the number of times an animation cycle should be played before stopping.
    animation-directionSpecifies whether or not the animation should play in reverse on alternate cycles.
    animation-fill-modeSpecifies how a CSS animation should apply styles to its target before and after it is executing.
    animation-play-stateSpecifies whether the animation is running or paused.
    @keyframesSpecifies the values for the animating properties at various points during the animation.