Introduction
Describe the precedence of CSS propertiy 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:
- Internal style
- Embedded style
- 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:
<html>
<head>
<title>Untitled Document</title>
</head>
<body style="background: #6CC7E1">
<div>
Text Line one</div>
<div>
Text Line two</div>
<div>
Text Line three</div>
</body>
</html>
Output
![image1.jpg]()
Note: It is only a 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:
<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.
<html>
<head>
<title>Untitled Document</title>/*embedded CSS style starts*/
<style>
.textbox
{
height: 70px;
font-size: 35px;
background: #C04ACA;
}
</style>
/*embedded CSS style ends*/
</head>
<body style="background: #6CC7E1">
<div class="textBox" style="height: 50px; font: Arial, Helvetica, sans-serif; font-size: 25px;
background: #D10A0A">
Text Line one</div>
<div class="textBox">
Text Line two</div>
<div class="textBox">
Text Line three</div>
</body>
</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 of the external style sheet below the internal style.
<head>
<title>Untitled Document</title>
<style>
.textbox
{
height: 70px;
font-size: 35px;
background: #C04ACA;
}
</style>
<link href="cssvalues.css" rel="stylesheet" type="text/css" />
</head>
CSS
The following is the CSS:
body{background:#6CC7E1}
.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 overrides 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 overrides 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 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:
body{background:#6CC7E1}
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 a 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.