Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Usage of CSS !important rule
The !important rule in CSS provides a way to give maximum priority to a CSS declaration. When applied, it ensures that the property value will override any other conflicting styles, regardless of specificity or source order.
Syntax
selector {
property: value !important;
}
How CSS Cascade Works Without !important
Normally, CSS follows the cascade rule where styles applied later override earlier styles. Here's an example ?
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<p>This text will be blue</p>
</body>
</html>
This text will be blue
The text appears blue because the second rule overrides the first one due to cascade order.
Using !important to Override Cascade
When you add !important to a CSS declaration, it takes highest priority ?
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red !important;
}
p {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<p>This text will be red despite the second rule</p>
</body>
</html>
This text will be red despite the second rule
The text appears red because !important gives the first color declaration maximum priority, even though it appears earlier in the CSS.
Overriding Inline Styles
The !important rule can even override inline styles, which normally have high specificity ?
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green !important;
font-weight: bold;
}
</style>
</head>
<body>
<p style="color: purple; font-size: 18px;">This text will be green, not purple</p>
</body>
</html>
This text will be green, not purple
The text appears green because !important overrides the inline style, while other properties like font-size from the inline style still apply.
Best Practices
While !important is powerful, use it sparingly as it can make CSS harder to maintain and debug. It's better to rely on proper CSS specificity and cascade order whenever possible.
Conclusion
The !important rule forces a CSS property to take maximum priority, overriding normal cascade rules and specificity. Use it judiciously to avoid creating maintenance issues in your stylesheets.
215 Views
