How to Use !important in CSS

Use !important only when a style must override competing CSS that you cannot easily change. The most common cases are third-party libraries, inline styles, legacy stylesheets, and quick utility overrides.

What you’ll build or solve

You’ll learn how to use !important in CSS to force one rule to win. You’ll also know when it solves a real override problem and when better selector structure is the cleaner fix.

When this approach works best

This approach is the right choice when normal CSS specificity is blocked by styles you do not control.

Common real-world scenarios include:

• Overriding third-party widgets
• Fighting inline styles
• Temporary debug overrides
• Legacy stylesheet conflicts
• Utility helper classes

This is a bad idea when better selector specificity or stylesheet order can solve the problem. Overusing !important makes CSS harder to maintain.

Prerequisites

You only need:

• A basic HTML and CSS file
• A text editor
• Basic CSS specificity knowledge

Step-by-step instructions

Step 1: Add !important at the end of the property value

Place !important after the value and before the semicolon.

<button class="cta">Start lesson</button>

<style>
  .cta {
    background: #0057ff !important;
  }
</style>

A common use case is overriding an inline or library-applied rule.

<div class="widget-message">Support widget</div>

<style>
  .widget-message {
    color: #111 !important;
  }
</style>

What to look for:

• !important goes after the value
• Use it on the exact property that needs the override
• Great for third-party CSS conflicts
• Avoid using it across large component styles
• Prefer specificity and cascade fixes first

Examples you can copy

Override widget color

<style>
  .chat-widget {
    background: white !important;
  }
</style>

Force hidden banner

<style>
  .promo-banner {
    display: none !important;
  }
</style>

Utility spacing override

<style>
  .no-margin {
    margin: 0 !important;
  }
</style>

Common mistakes and how to fix them

Mistake 1: Using !important everywhere

What the reader might do:

.card {
  padding: 16px !important;
  margin: 16px !important;
  border: 1px solid #ddd !important;
}

Why it breaks: future overrides become much harder because every rule now needs stronger force.

Corrected approach:

Use !important only on the single conflicting property.

Mistake 2: Using it instead of fixing selector specificity

What the reader might do:

.button {
  color: red !important;
}

Why it breaks: the real issue may be stylesheet order or a weak selector.

Corrected approach:

Try a stronger selector first.

header .button {
  color: red;
}

Mistake 3: Placing it in the wrong spot

What the reader might do:

.button {
  color: !important red;
}

Why it breaks: !important must come after the property value.

Corrected approach:

.button {
  color: red !important;
}

Troubleshooting

If the override still does not work, inspect whether another rule also uses !important.

If the CSS becomes hard to manage, replace force overrides with better selector structure.

If third-party styles keep winning, target the exact widget class more specifically.

If too many rules depend on it, refactor the cascade instead of stacking more force.

Quick recap

• Put !important after the value
• Use it only for real override conflicts
• Best for third-party or inline CSS fights
• Prefer specificity fixes first
• Avoid using it across full components