Post
Ask Question

Selectors Precedence Levels in CSS

Introduction

 
This article explains what CSS Precedence Levels are.
 
CSS Precedence Level
 
A CSS precedence level mainly defines the priority of CSS styles that CSS applies to a specific element at the following three levels.
  • Inline styles
  • Embedded styles
  • External styles
Inline styles
 
Inline styles have the highest priority over the external style and external styles. Inline styles take priority over embedded styles and external styles. Inline-styles are applied directly to an element via the style attribute.
 
Code of Inline style
    1. <!DOCTYPE html>        
    2. <html xmlns="http://www.w3.org/1999/xhtml">      
    3.   <head>      
    4.   <title> My HTML Page </title>      
    5.   </head>      
    6.   <body>      
    7.  <div id="Box" style="width:10px">      
    8.   <div id="Table">      
    9.   <h1>Best Company</h1>      
    10.   <ul id = "list" >      
    11.  <li> CSharpCorner</li>      
    12.   <li> Norton India</li>      
    13.  <li id="DebugCoder">DebugCoder</li>      
    14.  <li>MCN Solution</li>      
    15.  </ul>    
    16. </div>      
    17.  </div>      
    18.   </body>     
      inline
       
      Embedded styles
       
      Embedded styles take priority over external styles. It has more priority in comparison to external styles and less than in inline styles. This type of style is applied only within the style tag, that goes in the head of your document.
       
      HTML code of embedded style
        1. <!DOCTYPE html>        
        2. <html xmlns="http://www.w3.org/1999/xhtml">        
        3. <head>        
        4.     <title> My HTML Page </title>        
        5.     <style type="text/css">        
        6.     h1 {        
        7.         color: #f00;        
        8.     }        
        9.     </style>        
        10.        </head>        
        11.     <body>        
        12.         <div id="Box">        
        13.             <div id="Table">        
        14.            <h1>Best Company</h1>        
        15.                 <ul id = "list" >        
        16.                     <li> CSharpCorner</li>        
        17.                     <li> Norton India</li>        
        18.                     <li id="DebugCoder">DebugCoder</li>        
        19.                     <li>MCN Solution</li>        
        20.                 </ul>        
        21.               </div>        
        22.         </div>        
        23.     </body>    
        CSS code of embedded style
          1. html {      
          2. }        
          3. body {        
          4. }          
          5. #Box {      
          6. color:#f00;      
          7. }        
          8. #Table {        
          9. }        
          10. #list {      
          11. }      
          12. }   
          embedded
           
          External styles
           
          External styles have less priority. It is a file with a CSS extension that is applied in the head of your document. Never remind that external files do not take priority over inline styles and embedded styles.
           
          HTML code of external style
          1. <!DOCTYPE html>      
          2. <html xmlns="http://www.w3.org/1999/xhtml">      
          3. <head>      
          4.     <title> My HTML Page </title>      
          5.     <link href="StyleSheet.css" rel="stylesheet" />      
          6.     <style type="text/css">      
          7.     h1 {      
          8.         color: #f00;      
          9.     }      
          10.     </style>      
          11.        </head>      
          12.     <body>      
          13.         <div id="Box">      
          14.             <div id="Table">      
          15.            <h1>Best Company</h1>      
          16.                 <ul id = "list" >      
          17.                     <li> CSharpCorner</li>      
          18.                     <li> Norton India</li>      
          19.                     <li id="DebugCoder">DebugCoder</li>      
          20.                     <li>MCN Solution</li>      
          21.                 </ul>      
          22.               </div>      
          23.         </div>      
          24.     </body>  
            CSS code of external sheet
            1. html {      
            2. }           
            3. body {             
            4. }                
            5. #Box {      
            6. color:#00ff90;      
            7. }       
            8. #Table {      
            9. }           
            10. #list {      
            11.   }  
               
              external
               

              CSS precedence level of selectors

               
              There are various types of CSS precedence levels of selectors.
              • ID selector
              • Class selector
              • Type Selector
              • Element Selector
              ID selector
               
              ID selector can be used to override all the selectors. The #id selector applies the styles to elements with a specific id. The #id selector can be supported in all browsers.
               
              HTML code for ID selector 
              1. <div id="div1">    
              2.  Hello    
              3.  </div>    
              4.  </body>   
              CSS code for ID selector
              1. #div1{    
              2.  font-size:32px;    
              3.  color:#b200ff;    
              4.  border: 2px solid gray;    
              5.  }   
              IDSelector
               
              Class selector
               
              The class selector uses the HTML class attribute. It finds elements with the specific class that we define in a CSS file. The class selector can be used to find elements with a specific class followed by the name of the class.
               
              HTML code for class selector
              1. <body>    
              2.  <div class="div1">    
              3.  Class Selector     
              4.  </div>    
              5.  </body>    
              CSS code for class selector
              1. .div1{    
              2.  font-size:32px;    
              3.  color:#b200ff;    
              4.  border: 2px solid gray;    
              5.  }   
                classSelector
                 
                Element selector
                 
                The element selector selects an element based on the element name. The user can select all elements on a page using <p>.
                 
                HTML code for element selector
                1. <body>  
                2.    <div>    
                3.       Element Selector Example 1     
                4.    </div>  
                5.    <div>    
                6.       Element Selector Example 2    
                7.    </div>  
                8.    <div>    
                9.       Element Selector Example 3    
                10.    </div>  
                11. </body> 
                CSS code for element selector
                1. div{    
                2.  font-size:32px;    
                3.  color:#b200ff;    
                4.  border: 2px solid gray;    
                5.  }  
                ElemnetSelector
                 
                Child selector
                 
                The child selector can be used to match elements that are direct children of other elements.
                 
                HTML code for element selector
                1. <div>    
                2.  Element Selector Example 1     
                3.  </div>    
                4.  <div>    
                5.  Element Selector Example 2    
                6.  </div>    
                7.  <div>    
                8.  Element Selector Example 3    
                9.  </div>   
                  CSS code for element selector
                  1. div:first-child {    
                  2.  font-size: 32px;    
                  3.  color: #b200ff;    
                  4.  border: 2px solid gray;    
                  5.  }    
                  6.  div:last-child{    
                  7.  font-size:34px;    
                  8.  color:#ffd800;    
                  9.  border : 2px dotted gray;    
                  10.  }   
                  childSelector
                   

                  Summary

                   
                  This article provided an introduction to CSS precedence levels and also explained the CSS precedence level of selectors.


                  Similar Articles