CSS !important

ADVERTISEMENT

What is !important in CSS?

!important is used to force a CSS rule to apply, even if there are other rules with higher specificity.

It overrides:

  • Inline styles
  • Specific selectors
  • Even other !important rules (depending on source order)

✅ Syntax

selector {
  property: value !important;
}

Example:

p {
  color: red !important;
}

Even if another rule tries to change the p color, this one wins unless it’s overridden by another !important that comes later.

✨ Example: Without vs With !important

/* Default style */
.button {
  color: black;
}

/* Override */
.button {
  color: white !important;
}

Without !important, a more specific selector or inline style might override it. With !important, this rule takes top priority.

⚠️ When to Use !important

✅ Use it:

  • To override third-party libraries or inline styles.
  • In utility/helper classes (rarely).

🚫 Avoid it:

  • In general styles — it makes debugging hard.
  • Repeatedly — leads to a cascade of unmanageable !important wars.

🧠 Best Practices

  • Use better selector specificity instead of !important whenever possible.
  • If you must use it, document why in comments.
  • Don’t use it in large-scale CSS — it breaks maintainability.

🧪 Real-World Tip

If something isn’t working, before adding !important, inspect it using browser dev tools to see which rule is overriding it. You might just need a better selector.

ADVERTISEMENT