CSS !important

Add W3Buddy as a preferred source on Google

हि En

🔊 Listen

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.