CSS Tutorial

CSS !important

The !important flag forces a CSS declaration to win over almost every other rule, regardless of specificity or source order. It is powerful but blunt, and overusing it makes stylesheets hard to maintain. This guide explains exactly how !important works, the rare cases where it is justified, and the safer alternatives you should reach for first.

What is !important?

Adding !important after a property value promotes that declaration above the normal cascade. A rule with !important beats any conflicting rule without it, even one with far higher specificity. It sits at the top of the priority order, overriding classes, IDs, and even inline styles that lack their own !important.

Syntax

p {
  color: red !important; /* wins over almost everything */
}

How !important Changes the Priority Order

Normally the browser resolves conflicts by specificity and then source order. !important inserts a higher tier above all of that for author styles.

Priority (highest first)	Declaration
1	Author styles with !important
2	Inline style attribute
3	Author styles by specificity, then order
4	Browser default styles

Live Example: !important Wins

The ID selector below would normally win by specificity, but the element rule uses !important and takes over, turning the text red.

Example

<!DOCTYPE html>
<html>
<head>
<style>
  #box { color: green; }        /* high specificity (1,0,0) */
  p { color: red !important; }  /* low specificity, but !important wins */
</style>
</head>
<body>
  <p id="box" style="font-family:system-ui,sans-serif;">
    Despite the green ID rule, !important forces me red.
  </p>
</body>
</html>

⚠️

Once you use !important to win a fight, the only way to override it later is another !important with higher specificity. This escalation is why !important-heavy stylesheets become so painful to change.

When !important is Justified

There are a few legitimate uses. Utility classes that must always apply, overriding stubborn third-party or inline styles you cannot edit, and accessibility overrides are reasonable cases. Even then, use it sparingly and deliberately.

Overriding inline styles injected by a third-party script or CMS you cannot modify.
Single-purpose utility classes like .hidden { display: none !important; }.
User or accessibility stylesheets that must take precedence over site design.

Safer Alternatives

Before reaching for !important, try increasing specificity the honest way or restructuring your CSS. A slightly more specific selector usually solves the conflict without the side effects.

/* Instead of: */
.btn { background: blue !important; }

/* Prefer a more specific, intentional selector: */
.toolbar .btn { background: blue; }

💡

If you keep needing !important on the same component, it is usually a sign the underlying selectors are too specific elsewhere. Lowering that specificity fixes the root cause instead of patching symptoms.

Key points

!important overrides normal specificity and source order.
It ranks above inline styles and regular author rules in the cascade.
Overriding an !important requires another !important with higher specificity.
Reserve it for utility classes, unremovable third-party styles, and accessibility overrides.
Prefer a more specific selector or refactoring before using !important.