Post
Ask Question

Priority of CSS Values For an HTML Document

Introduction

 
Describe the precedence of CSS property values in an HTML document. If we give different values for a single property to the same selector of an HTML document
 
then which value will have the highest priority is described in this article.
 
Step 1
 
We can apply CSS for an HTML document in one of the following three ways:
  1. Internal style
  2. Embedded style
  3. External style
You can find through the following link how these three style sheets work for an HTML document:
 
http://www.c-sharpcorner.com/uploadfile/abhikumarvatsa/working-with-css/
 
Step 2
 
Let's start with some HTML design and give an inline style for the body background color; see:
  1. <html>  
  2. <head>  
  3.     <title>Untitled Document</title>  
  4. </head>  
  5. <body style="background: #6CC7E1">  
  6.     <div>  
  7.         Text Line one</div>  
  8.     <div>  
  9.         Text Line two</div>  
  10.     <div>  
  11.         Text Line three</div>  
  12. </body>  
  13. </html> 
Output
 
image1.jpg
 
Note: It is only an HTML design; I had not applied any CSS styles except body background.

Step 3
 
Now I will apply an inline CSS style to the first div of this HTML structure; see:
  1. <div style="height:50px; font:Arial, Helvetica, sans-serif; font-size:25px; background:#D10A0A; display:inline-block">Text Line one</div> 
Output
 
image2.jpg
 
Step 4
 
I will define a class to these div and apply an embedded CSS style to this HTML structure for the class selector.
  1. <html>  
  2. <head>  
  3.     <title>Untitled Document</title>/*embedded CSS style starts*/  
  4.     <style>  
  5.         .textbox  
  6.         {  
  7.             height: 70px;  
  8.             font-size: 35px;  
  9.             background: #C04ACA;  
  10.         }  
  11.     </style>  
  12.     /*embedded CSS style ends*/  
  13. </head>  
  14. <body style="background: #6CC7E1">  
  15.     <div class="textBox" style="height: 50px; font: Arial, Helvetica, sans-serif; font-size: 25px;  
  16.         background: #D10A0A">  
  17.         Text Line one</div>  
  18.     <div class="textBox">  
  19.         Text Line two</div>  
  20.     <div class="textBox">  
  21.         Text Line three</div>  
  22. </body>  
  23. </html> 
Output
 
image3.jpg
 
Step 5
 
I will apply an external CSS style to this HTML structure div (the class selector will be used in external CSS also). The Inline & Internal (Embedded) style will remain the same.
 
I will provide a link to the external style sheet below the internal style. 
  1. <head>  
  2.     <title>Untitled Document</title>  
  3.     <style>  
  4.         .textbox  
  5.         {  
  6.             height: 70px;  
  7.             font-size: 35px;  
  8.             background: #C04ACA;  
  9.         }  
  10.     </style>  
  11.     <link href="cssvalues.css" rel="stylesheet" type="text/css" />  
  12. </head> 
CSS
 
The following is the CSS:
  1. body{background:#6CC7E1}  
  2. .textbox{height:100px; font-size:35px; background:#488921; display:inline-block} 
Output
 
image4.jpg
 
Note: Here note that the properties defined in the external CSS override the properties defined in the embedded CSS because it uses a top to bottom approach.
 
Step 6
 
Now I will change the selector in the external CSS. I will replace the class selector by a tag (div) selector.
 
Output
 
image5.jpg
 
Note: Here note that the properties defined in the embedded CSS override the properties defined in the external CSS because the class selector has a higher priority than the tag selector and here the top to bottom approach is not used.
 
Step 7
 
The CSS value given with "important" has a higher priority for an HTML document. In external CSS for the Height property, I will provide a value with important and inline, the embedded CSS will remain the same.
 
External CSS
 
The following is the external CSS:
  1. body{background:#6CC7E1}  
  2. div{height:100px !important; font-size:35px; background:#488921; display:inline-block} 
Output
 
image6.jpg
 
Note: Here note that the value given for the height property in external CSS overrides the values given to this property in Inline and Embedded CSS because in external CSS this value is defined as an important value.

Summary

 
Now we can say that the priority of the CSS property in an HTML document is applied top to bottom and left to right.
 
Values defined as Important will have the highest priority.
 
Inline CSS has a higher priority than embedded and external CSS.
 
So the final order is:
 
Value defined as Important > Inline >id nesting > id > class nesting > class > tag nesting > tag.
 
Feel free to post your opinion about this topic by clicking on post comment.


Similar Articles