CSS Important: Syntax, Usage, and Examples

The !important declaration in CSS lets you force a style rule to override any other conflicting declarations, no matter where they appear in the stylesheet. Developers often reach for CSS important when specificity rules or stylesheet order make it hard to apply the correct style. While it solves styling conflicts quickly, using it too often can create difficult-to-maintain code. The key is knowing when and how to use !important—and when to avoid it.

How to Use CSS Important

To apply !important, you add it at the end of a CSS declaration, before the semicolon. Here’s the basic syntax:

selector {
  property: value !important;
}

For example:

p {
  color: red !important;
}

In this case, all <p> elements will be red—even if other styles elsewhere in the stylesheet try to override it.

You can use it with any CSS property:

.button {
  background-color: blue !important;
  font-size: 18px !important;
}

The browser treats these declarations as having the highest priority—except when another declaration with !important and higher specificity overrides them.

When to Use Important in CSS

Using CSS !important is a last-resort tool for forcing styles when nothing else works. While it's powerful, using it carelessly can lead to tangled, brittle code. Here are some situations where it makes sense.

Overriding Third-Party Styles

If you're working with frameworks like Bootstrap or Material UI and you can't easily change the source styles, !important can help you take control.

.btn-primary {
  background-color: green !important;
}

This lets you override a deeply nested rule without touching the original library files.

Enforcing Critical Design Elements

Sometimes you need to make sure a style stays in place, regardless of other rules. For example, hiding a warning message under any condition:

.alert {
  display: none !important;
}

This approach ensures visibility or styling overrides all others—useful for A/B testing, security warnings, or accessibility changes.

Debugging Style Conflicts

When you’re unsure why a style isn’t applying, temporarily adding !important can help you isolate the problem. If the property still doesn’t apply, you know the issue isn’t specificity—it might be selector errors or JavaScript interference.

body {
  background-color: yellow !important;
}

Once you find the issue, it’s better to remove the !important and resolve the conflict properly.

Examples of Important CSS in Action

Overriding Inline Styles

Inline styles have high specificity, but you can override them using !important.

<p style="color: blue;">This text looks blue</p>

<style>
p {
  color: red !important;
}
</style>

With !important, the paragraph turns red—even though the inline style says blue.

Priority in Class Conflicts

If you have two classes competing for the same property, !important wins:

.box {
  border: 2px solid black;
}

.highlight {
  border: 2px dashed green !important;
}

Even if .box appears later in the stylesheet, .highlight will display the green dashed border.

Resetting Styles

Sometimes you want to remove a browser default style or undo inherited styles:

input {
  all: unset !important;
}

This removes all inherited styles from the input field and ensures you have a clean slate.

Learn More About Important in CSS

How CSS Important Works Behind the Scenes

CSS normally resolves style conflicts using three main rules:

1. Specificity – A more specific selector wins.
2. Source order – Later styles override earlier ones.
3. Inline styles – These usually override external or internal styles.

But when you add !important, it jumps to the front of the line, beating specificity and source order. The only way to override it is with another rule that also uses !important—and has higher specificity.

/* Lower specificity */
p {
  color: green !important;
}

/* Higher specificity – this wins */
.content p {
  color: black !important;
}

Knowing this helps you use important CSS intentionally without breaking your styling logic.

The Danger of Overusing !important

While CSS important can seem like a quick fix, using it too much leads to problems:

• Harder to debug – You end up guessing which !important wins.
• Poor collaboration – Other developers may not understand why styles behave unpredictably.
• Fragile codebase – Styles become dependent on brute force rather than structure.

Instead of relying on !important, consider improving your CSS architecture:

• Use more specific selectors.
• Refactor your style order.
• Adopt a methodology like BEM or utility-first CSS.

Important vs Inline Styles

People often ask if !important can override inline styles—and yes, it can. Normally, inline styles beat everything. But if a style with !important is applied, it can win even over inline CSS, assuming the selector is valid and matches.

<div style="color: green;">Test</div>

<style>
div {
  color: orange !important;
}
</style>

Here, the text will be orange.

Using Important CSS with JavaScript

If you dynamically inject styles with JavaScript and want to apply !important, you can’t use standard style.property = value syntax. Instead, use setProperty:

document.querySelector("p").style.setProperty("color", "red", "important");

This method allows you to attach the !important flag from JavaScript.

Managing Important in CSS Frameworks

Some CSS libraries like Tailwind avoid !important entirely. Others like Bootstrap might use it for utility classes. If you're working in a utility-heavy environment, consider using a prefix or a custom modifier to flag high-priority styles—but only when absolutely necessary.

If you're writing your own framework or design system, reserve !important for edge cases that genuinely need it.

CSS Override Important: How to Beat It

There are ways to override an !important declaration if you need to:

1. Use a selector with higher specificity and add your own !important.
2. Use inline styles with !important.
3. Apply styles via JavaScript with setProperty.

Just stacking more !important isn’t a long-term strategy, but understanding how it behaves can help you fix issues during development.

Important Important CSS?

Yes, it’s possible (and sometimes necessary) to override one !important with another. But the second rule must have either:

• Higher specificity
• More targeted scope

So if you're asking, “how do I override important in CSS,” the answer is: with more important CSS—but smarter.

/* Original rule */
p {
  color: green !important;
}

/* Override with higher specificity */
.article p {
  color: red !important;
}

Using the right selector hierarchy is more effective than simply adding more force.

Using !important in CSS can be a lifesaver in messy codebases, third-party frameworks, or legacy systems. It helps you override styles quickly and assert control when other solutions fail. But it’s also a sharp tool—useful in skilled hands, but dangerous when overused.

Now that you understand how CSS important works, how to apply it, and when it’s safe to do so, you can confidently override styles without turning your CSS into a maze. Use it sparingly, thoughtfully, and only when your other options are exhausted.