Episode 12 of 53

The Important Declaration

Learn about the !important declaration and when (and when not) to use it.

The !important declaration overrides all other specificity rules. It forces a style to apply no matter what.

Syntax

p {
    color: red !important;
}

How It Works

When you add !important to a declaration, it beats every other rule targeting the same property — regardless of specificity or source order:

#header p.intro {
    color: blue;  /* Specificity: 1-1-1 */
}

p {
    color: red !important;  /* This wins anyway! */
}

When to Use It

  • Overriding third-party CSS you cannot modify
  • Utility classes that absolutely must apply (e.g., .hidden { display: none !important; })

When NOT to Use It

  • Never as a first resort — fix your specificity instead
  • Don't use it to "win" selector battles in your own code
  • It creates maintenance nightmares — the only way to override !important is with another !important with higher specificity

Think of !important as a fire extinguisher: essential in emergencies, but if you're using it constantly, something is fundamentally wrong.