CSS Syntax

A CSS rule consists of a selector ,a declaration block, property and value.

A style rule is made below parts.

1. Selector : The selector points to the HTML element you want to style.
2. Declaration Block : The declaration block can contain one or more declarations separated by a semicolon.
3. Property : A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
4. Value : Values are assigned to CSS properties.

You can put CSS Style Rule Syntax as below.
selector { property: value }

CSS Example :
h1{
     background: #CAA215;
     color: #fff;
     font-size: 24px;
}

h1 tag is heading tag which is called as selector.

Open and closing curly brackets { } is called as declaration block.

background, color and font-size are called as property.

#CAA215, #fff, 24px are called as value.

You can define selectors in various simple ways as per as below.

1. The Type Selectors : Apply same property to all same selector.
   h1 {
     color: #CAA215;
   }
    
2. The Universal Selectors : Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.
   * {
     color: #CAA215;
   }
    
3. The Descendant Selectors : Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <li> element only when it lies inside <ul> tag.

   ul li {
     color: #CAA215;
   }

4. The Class Selectors : 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.

   .main{
     color: #CAA215;
   }

    

5. The ID Selectors : 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.
   #main{
     color: #CAA215;
   }
    
6. The Child Selectors : You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality.

   header > p{
     color: #CAA215;
   }

7. The Attribute Selectors : You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text .

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

8. Grouping Selectors : You can apply a style to many selectors.

   h1, h2, h3 {
     color: #CAA215;
   }

   #main, #header, #content {
     color: #CAA215;
   }