CSS Tutorials

Syntax In CSS
Previous Home Next

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document.

A style rule is made of three parts:

  1. Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.
  2. 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 or border etc.
  3. Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.
The syntax of CSS declaration is as follows:
selector {

There is no limit on the number of property:value pair that can be specified for a selector.

There are three main types of selectors:

  1. type selectors: Type selectors target elements by their element type.
  2. h1 { color: red }
  3. class selectors: Class selectors allow us to apply the same styles to different elements at once by using the same class attribute value across multiple elements. The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period character, followed by the name of the class:


    .hellodelhi { color: green }


    <div class="hellodelhi">color: green</div>
    <p class="hellodelhi">color: green</p>
  4. ID selectors: ID selectors are even more precise than class selectors, as they target only one unique element at a time. The id selector uses the id attribute of an HTML element to select a specific element. An id should be unique within a page, so the id selector is used if you want to select a single, unique element.

    To select an element with a specific id, write a hash character, followed by the id="hellodelhi"of the element.

    #hellodelhi { color: red;} 
Previous Home Next