CSS Syntax – Selectors

CSS Syntax:

In the earlier lesson, we slightly accomplished CSS introduction. In that lesson, We would deal with CSS syntax. CSS syntax contains a group of selectors and declaration portion. CSS syntax have its own three factors respectively,

  1. Selectors
  2. Property
  3. Value

CSS Syntax

Selector is just like a name of block and this block could have multiple properties with values. Selector name could be anything else but relevant with your requirement like ContentBody {  }.In which ContentBody is a selector name and all declarations factors like properties and values enclosed inside these curly brackets {  }. For better understandable view, See the below example:

ContentBody {
      background-color:#00F;  
      font-size:12px;
}

In the above CSS syntax, Inside {  } curly brackets declaration factors are existing. These declaration factors have two fragments, First is property and second is Value of this property. Take the above example, Above code have three properties such as background-color , font-size. Slightly ahead, These properties have specific values such as, #00F , 12px. All declaration will be ended with semi-colon. You can manipulate the above CSS code in a single line but it will look like complicated therefore for flexibility and better understanding write separately with each other. Every declaration consist on property and its value and finally this declaration will be ended with semicolon. Keep remember that, semicolon will be used end of the declaration and among the property & value, We will use simple colon.

Comparison the above given example CSS with the above image and find out the each factor easily. You can utilize these CSS with paragraph selectors and heading selectors etc. See the below example.

p {
 font-family:Verdana, Geneva, sans-serif;
 font-size:12px;
 color:#000;
 float:left;
 }

Similarly CSS for headings,

h1{
 font-size:30px;
 color:#F90;
 }

Above both CSS have same scenario like previous but selector name belongs to paragraphs and heading respectively. If you have queries concern with CSS syntax then please If you have queries concern with CSS syntax then consult with us. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *