CSS !important

The !important declaration in CSS is used to force a particular style rule to override all other conflicting rules, including inline styles and rules with higher specificity.

It should be used sparingly, only when absolutely necessary — as it can make your CSS harder to maintain.

Syntax

				
					selector {
  property: value !important;
}

This tells the browser:

“No matter what other rule exists, apply this one.”

Normal Rule Overridden

In this case, inline CSS overrides the internal CSS rule:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>

  <p style="color: red;">This will be red due to inline CSS.</p>

</body>
</html>

Using !important to Override Inline Style

Now let’s force the paragraph to stay blue, even though inline CSS tries to make it red:

				
					<!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    p {
      color: blue !important;
    }
  </style>
</head>
<body>

  <p style="color: red;">This will be blue due to !important.</p>

</body>
</html>

Output: The paragraph appears blue, because !important overrides inline CSS.

When to Use !important

When third-party CSS is hard to override.
When you must fix something urgently.
When dynamic styling through JavaScript conflicts with CSS rules.

Avoid Overuse

Using !important everywhere can:

Make your CSS harder to debug.
Break the cascade structure of stylesheets.
Cause issues with theme customization or responsive design.