Facebook Pixel
</> CodeWithHarry

CSS !important

In CSS, rules are applied based on the cascade:

  • Browser default styles
  • External stylesheet
  • Internal stylesheet
  • Inline styles (highest priority)

But sometimes, even with this sequence, you may want a property to override everything else. That’s where the !important keyword comes in.

Adding !important to a CSS property ensures it always takes priority, no matter where it appears in the stylesheet.

Syntax

selector {
  property: value !important;
}
  • property: The CSS property you want to apply.
  • value: The value of the property.
  • !important: Forces the style to override all other conflicting rules.

Example 1: Without !important

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Important Example</title>
  <style>
    p {
      color: blue;   /* Internal stylesheet */
    }
  </style>
</head>
<body>
  <p style="color: red;">This is a paragraph.</p>
</body>
</html>

Output:

without !important example

The paragraph text will be red because inline styles override internal CSS.

Example 2: With !important

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Important Example</title>
  <style>
    p {
      color: blue !important; /* Highest priority */
    }
  </style>
</head>
<body>
  <p style="color: red;">This is a paragraph.</p>
</body>
</html>

Output:

with !important example

The paragraph text will be blue because !important overrides the inline style.

Quick Recap -

  1. !important overrides all normal CSS rules, including inline styles.
  2. Use it sparingly – overusing it makes stylesheets harder to manage and debug.
  3. If multiple rules have !important, the one with higher specificity wins.
  4. Best practice: use clean and structured CSS first, and only use !important as a last resort.
CSS InheritCSS Media Queries Advanced