Introduction to CSS Important
CSS important is a property, name itself saying it is important. This property used with as attribute last value with “!”(Exclamatory) symbol. This property makes all the subsequent CSS rules on any element will be ignored and the priority will give to ! important property attribute. This! important rule overrides all the previous styles. It means! important property increases its priority over other elements.
Advantage:
- Easy to override any element property.
How Does Important Property Work in CSS?
This CSS! important property applied just before the semicolon(;) of the end of an attribute value. !important to prioritize the element over all other subsequent elements.
Syntax:
element {
attribute: value !important;//As you see !important property always at the end of the attribute value means just before semicolon(;)
}
Consider below Example for illustration:
p {
color: blue !important;
}
#id {
color: red;
}
<p id="id">I am Paramesh</p>Explanation: In the above example the paragraph will be blue even though “id” selector has more priority. This concludes !important property overrides that id selector property.
Examples of CSS Important
Here are the following examples mention below
Example #1
Color and Background color with important property:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Important Property</title>
<style>
h1
{
color: green !important;
background-color: gray !important;
text-align: center !important;
}
p{
background-color: fuchsia !important;
color: white !important;
font-size: 23px !important;
}
#impID
{
background-color: red;
color: blue;
}
</style>
</head>
<body>
<h1 id="impID">Introduction on important property</h1>
<p id="impID">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
</body>
</html>Output:
Explanation: As you can see the above code color and background color got precedence of !important property only but it does not apply color and background color given within the impID.
Example #2
Border with !important property Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Important Property</title>
<style>
h1
{
color: green !important;/*All the h1 tags will be applied by only green color*/
text-align: center;
border: solid 2px red !important;/*All the h1 tags will be applied by only red color, solid border and 2px size*/
}
p{
border: solid 2px red !important;/*All the h1 tags will be applied by only red color, solid border and 2px size*/
color: blue !important;/*All the h1 tags will be applied by only green color*/
font-size: 30px !important;
}
/*This styles will not apply because this are overide by above !important property*/
#h1, #p1, #p2
{
border: solid 10px brown;
color: pink;
}
</style>
</head>
<body>
<h1 id="h1">Introduction on important property</h1>
<p id="p1">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
<p id="p2">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
</body>
</html>Output:
Explanation: As you can see the above code color and border got precedence of !important property only but it does not apply color and border given within the h1,p1, and p2 IDs.
Example #3
Font size and color without !important property Example:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Important Property</title>
<style>
h1
{
color: blue !important;/*All the h1 tags will be applied by only blue color*/
text-align: center;
border: solid 2px green !important;/*All the h1 tags will be applied by only red color, solid border and 2px size*/
}
p{
border: solid 2px red !important;/*All the h1 tags will be applied by only red color, solid border and 2px size*/
color: red !important;/*All the h1 tags will be applied by only green color*/
font-size: 30px;/*This we have not taken important so if some where we have this font-size property then this will be overridden*/
}
/*This styles will not apply because this are overide by above !important property*/
#p1
{
font-size: 20px;/*30px font-size will be overridden by 20px*/
background-color: lightgreen;/*background color we have not taken in the above so this background color applied*/
color: blue;/*This will not overridden becuase already above "p" color taken as important*/
}
#p2
{
font-size: 25px;/*30px font-size will be overridden by 25px*/
background-color: lightgray;/*background color we have not taken in the above so this background color applied*/
color: blue;
}
#p3
{
font-size: 32px;/*30px font-size will be overridden by 32px*/
background-color: lightpink;/*background color we have not taken in the above so this background color applied*/
color: blue;
}
</style>
</head>
<body>
<h1 id="h1">Importance of !important property</h1>
<p id="p1">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
<p id="p2">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
<p id="p3">CSS important is a property, name itself saying it is important. This property used with as attribute last value with "!"(Exclamatory) symbol. This CSS important property makes all the subsequent CSS rules on any element will be ignored and the priority will give to !important property attribute. This !important rule overrides all the previous CSS styles. It means !important property increases its priority over other elements.</p>
</body>
</html>Output:
Explanation: First CSS compiler applies all !important property styles. If we do not have any important properties twice then second selector properties will be applied automatically. In the above color, border, header applied from first h1 and p selectors as it all is !important property. Whereas in case of font-size in p selector it is not !important property so below p1, p2, and p3 id selectors overridden this property. We don’t have a background color in h1, p selector so in p1,p2 and p3 id selectors applied its own background color.
Conclusion
!important property is used to consider any property as important over all other existing properties. Initially !important properties applied later rest of the property styles will be applied.
Recommended Articles
This is a guide to CSS Important. Here we discuss how does important property work in CSS with respective examples for better understanding. You may also look at the following articles to learn more –
