Updated June 23, 2023
Introduction to CSS Important
CSS important is a property, name itself saying it is important. This property is used as the attribute’s last value with the “!” (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 the “id” selector has more priority. This concludes !important property overrides that id selector property.
Examples
Here are the following examples:
Example #1
Color and Background color with important properties:
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, the second selector properties will be applied automatically. In the above color, border, and header applied from first h1 and p selectors as it all is !important property. In the case of font-size in the 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 the h1 and p selector, so id selectors applied their background color in p1,p2, and p3.
Conclusion
!important property is used to consider any property as important over all other existing properties. Initially !important properties will be applied. Later rest of the property styles will be applied.
Recommended Articles
We hope that this EDUCBA information on “CSS Important” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
