CSS Syntax

CSS Syntax

CSS syntax consist of a Selector,Property and Value.


Syntax

Selector { Property:Value; }

Example of CSS Syntax

p { color:blue; font-size:20px; } 

Code Explanation

  • Here 'p' is a selector,'color' and 'font-size' is the property and 'blue' and '20px' value of there respective property.

  • You can write property of CSS as many as you want.

Types of Selectors

  • Select By Tag
  • p
    {
    color:blue;
    }
    

  • Universal Selector
  • It can select all the tag in webpage and change the color of the text to blue.

    *
    {
    color:blue;
    }
    

  • Select By Class
  • You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

    .demo
    {
    color:blue;
    }
    

  • Select By Id
  • You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

    #demo
    {
    color:blue;
    }
    

  • Descendent Selector
  • You can define style rules particular element only when it lies inside a particular element.

    p a
    {
    color:blue;
    }
    for class selector
    p .demo
    {
    color:blue;
    }
    for id selector
    p #demo
    {
    color:blue;
    }
    

  • Select By Child
  • This will change the color to blue of all the paragraphs which are direct child of body element.

    body > p
    {
    color:blue;
    }
    

  • Select By Attribute
  • This will change the color to blue of all the input fields having value of type is text.

    input[type="text"]
    {
    color:blue;
    }
    

  • Grouping Selector
  • This will change the color to blue of all the h1,p,a.

    h1,p,a
    {
    color:blue;
    }
    
    PrevNext

    Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email