Basic CSS Selectors

There are three types of selectors in CSS,

Element: can be selected using it’s name e.g. ‘p’, ‘div’ and ‘h1’ etc.
Class: can be selected using ‘.className’ operator e.g. ‘.h3_blue’.
ID: can be selected using ‘#idName’ e.g. ‘#my_para’.

We will use following HTML for understanding the selectors


	     
	        1 <!-- css.html -->

            2 

            3 <!DOCTYPE html>

            4 <html>

            5 <head>

            6 <title>CSS Selectors</title>

            7 <link rel="stylesheet" type="text/css" href="asset/css/my_css.css">

            8 </head>

            9 <body>

            10 <h3>CSS Selectors</h3>

            11 

            12 <p class='c_head'> Paragraph with class 'c_head' </p>

            13 <p id='i_head'> Paragraph with id 'i_head' </p>

            14 

            15 </body>

            16 </html>

The code below shows the example of different selectors.


	      
 			1 /* asset/css/my_css.css */ 
 
            2 

            3 /*element selection*/

            4 h3 {

            5  color: blue;

            6 }

            7 

            8 

            9 /*class selection*/

            10 .c_head{

            11  font-family: cursive;

            12  color: orange;

            13 }

            14 

            15 

            16 /*id selection*/

            17 #i_head{

            18  font-variant: small-caps;

            19  color: red;

            20 }

Previous Next