CSS !important
The !important flag forces a declaration to win regardless of specificity or source order, and should be treated as a last resort.
Adding <code>!important</code> after a value lifts that single declaration above the normal cascade. It overrides more specific selectors, later rules, and even inline styles, which makes it powerful but easy to abuse.
Basic Syntax
Marking a declaration important
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: green !important;
}
#article p {
color: black;
}
</style>
</head>
<body>
<div id="article">
<p>This paragraph stays green.</p>
</div>
</body>
</html>Normally the id selector <code>#article p</code> would win, but the important flag on the plain <code>p</code> rule overrides it, so the paragraphs stay green.
When It Can Be Justified
- Overriding styles from a third-party library you cannot edit
- Utility classes that must always apply, such as a .hidden helper
- Quick debugging to confirm which element you are actually targeting
How Two Important Rules Compare
Specificity still decides between important rules
<!DOCTYPE html>
<html>
<head>
<style>
.alert { color: red !important; }
#box .alert { color: orange !important; }
</style>
</head>
<body>
<p class="alert">Plain alert</p>
<div id="box">
<p class="alert">Boxed alert</p>
</div>
</body>
</html>When more than one declaration is marked important, the browser again compares specificity among only those declarations, so the more specific <code>#box .alert</code> wins with orange.
Exercise: CSS !important
What is the primary effect of adding !important to a CSS declaration?
