CSS Tutorials

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.

selector {
property:value; 
}

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.

h1 { color: red }

2. 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:

   CSS

   .hellodelhi { color: green }
   

   HTML

   <div class="hellodelhi">color: green</div>
   <p class="hellodelhi">color: green</p>
   

3. 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;}