The CSS simple Selector

6 type of CSS Simple Selectors are here

Let's crack this

Name How to represent? Example code for CSS Example code for HTML Usage
ID Selector #ID_NAME
              
 #paragraphID{
  ---------
  CSS Code
  ---------
}
              
              
              
<p id="paragraphID"> 
   {any content}
</p>
              
            
ID is using for designing individual element. This is not a RULE. sometimes we use single ID name for multiple tags also. In CSS we use '#' infront of ID name for respresenting, It is "ID" name.
Note: A ID name cannot start with a number!
Class Selector .class_name
              
 .paragraphClass{
  ---------
  CSS Code
  ---------
}
              
              
              
<h1 class="paragraphClass"> 
   {any content}
</h1>
              
            
CLASS is using for designing group of elements. This is not a RULE. sometimes we use single class name for single tag also. In CSS we use '.' infront of class name for respresenting, It is "class" name.
Note: A class name cannot start with a number!
Element Class TAG_NAME.CLASS_NAME
              
 h2.headClass{
  ---------
  CSS Code
  ---------
}
              
              
              
<h2 class="headClass"> 
   {any content}
</h2>
              
            
Element class selector using to select the particular tag have a particular classname. In Example; CSS property will be applied on the h2 tags that have the class name "headClass". if there's a "P" tag that have classname "headClass" then this selector will exclude that "p" tag.
Universal Selector *
              
 *{
  ---------
  CSS Code
  ---------
}
              
              
This will be applied on the whole HTML page. Universal selector is using for styling whole page. It'll applied on all the elements in the page. for eg: Avoiding Browser default padding and margin injection. We do this all time
              
*{
    padding:0;
    marging:0;
}
              
          
Element Selector TAG_NAME
              
 h6{
  ---------
  CSS Code
  ---------
}
              
              
              
<h6> 
   {any content}
</h6>
              
            
Element selector is using for select specific tag name. For eg if we select the h3, this will select all the h3 element on the HTML page.

Grouping of Elements

How we write if 3 elements have same style? or more than 10 elements have same style?

Do we write one by one? No! We can do by putting coma (,) in-between them! for eg:

          
p, .pClass, #h2IdClass{
    ---------
    css code
    ---------
}
          
      

This CSS will make same style for "p" tag, tags that have "pClass" as class name, and tags that have "h2IdClass" as tag name;