CSS !important

CSS !important

The !important rule overrides all other CSS rules, regardless of specificity or source order. When used, it forces a property to take priority.

Because it breaks the normal cascade, !important should be used carefully.

How !important Works

When a declaration is marked as !important, it overrides:

• Normal selectors
• Selectors with higher specificity
• Earlier and later rules in the stylesheet

p {
  color: blue !important;
}

This rule will override other color rules applied to paragraphs.

Specificity vs !important

!important beats specificity.

#content p {
  color: red;
}

p {
  color: blue !important;
}

The paragraph text will be blue, even though the ID selector normally has higher specificity.

Multiple !important Rules

If multiple rules use !important, then specificity and source order apply again.

.card p {
  color: blue !important;
}

#wrapper p {
  color: red !important;
}

The text will be red because the ID selector has higher specificity.

When !important Is Acceptable

• Overriding inline styles you cannot change
• Utility/helper classes (e.g., .hidden)
• Quick fixes in legacy codebases

.hidden {
  display: none !important;
}

When to Avoid !important

• As a replacement for understanding specificity
• In large or scalable CSS architectures
• Repeatedly in component styles

Overusing !important makes CSS hard to maintain and debug.

Better Alternatives

• Use more specific selectors
• Reorder your CSS rules
• Use class-based styling instead of IDs
• Refactor conflicting styles

Code Challenge

Goal: Understand how !important affects the cascade.

HTML:

<div id="wrapper" class="card">
  <p>Important Test</p>
</div>

CSS:

.card p {
  color: blue;
}

#wrapper p {
  color: red;
}

p {
  color: green !important;
}

Task:

• Identify which color is applied
• Explain why !important wins

Answer: The text is green because !important overrides all other rules.

What’s Next?

Next, you will learn techniques for optimizing CSS for better performance.