Priority of CSS Values For an HTML Document

Preeti Zutshi
4y
120.8k
0
2

Article

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:

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

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:

<div style="height:50px; font:Arial, Helvetica, sans-serif; font-size:25px; background:#D10A0A; display:inline-block">Text Line one</div>

Output

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

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.

<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

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

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:

body{background:#6CC7E1}
div{height:100px !important; font-size:35px; background:#488921; display:inline-block}

Output

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.