How and When to Use !important Rule in CSS

When you try to look at the Cascading Style Sheets (CSS) of a website, a line that states !important is one thing you will notice in the code. Such a term affects the processing priorities within the style sheet.

Cascading Style Sheets are cascading, which means they are located in a specific order. The styles are usually applied in the order the browser reads them. Apply the first style, then the second style, etc.

Therefore, if a style happens at the top of a style sheet and then is lower down in the file, then the second scenario of that style is the one applied in subsequent instances, not the first. Practically, the last one listed will be used if two styles define the same thing (which means they have the same level of specificity).

Let's imagine, for instance, that a style sheet contains the following styles:

How to style HTML  element with CSS color property

p {
  color: green;
}

p {
  color: black;
}

Although the green color is applied to the first paragraph, the paragraph text would be rendered in black. The reason for this is that the "black" value is applied second. Because CSS is read top-to-bottom, the final value is "black", so it wins.

Below, we will discuss how the !important rule changes the priority.

How to Apply the !important Rule in CSS

The CSS !important rule increases a declaration's priority in the cascade override mechanism. In CSS, the !important means "this is important". It overrides declarations with lower priority in the cascade. This rule must be set at the end of the line, directly before the semicolon. Note that !important does not affect specificity calculations; it only forces the declaration to win during the override phase.

How to use !important CSS rule

p {
  color: green !important;
}

An !important declaration takes priority over a normal declaration. The style sheets of both the author and user can contain !important declarations, and user !important rules override author !important rules, but they do not override inline styles or other !important declarations from the same origin. This mechanism supports accessibility by allowing users to enforce styles like larger fonts or specific color combinations.

Declaring a shorthand property (e.g., margin) as !important applies the flag to all its sub-properties. It is primarily used to override styles from other style origins to enforce a specific design.

Here is an example to illustrate this:

Example of using the !important rule:

An example of how to use !important CSS rule

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      body {
        background-color: #1c87c9 !important;
      }
      body {
        background-color: #ffcc00;
      }
      h2 {
        color: #8ebf42;
      }
      h2 {
        color: #eeeeee !important;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <p>
      W3docs provides free learning materials for programming languages like HTML, CSS, JavaScript, PHP, etc.
    </p>
  </body>
</html>

Try it Yourself »

In the given example, the background color of the <body> is blue instead of yellow, and the heading is gray instead of green. This is because the !important rule takes precedence over the later normal declaration.

When to Use the !important Rule

When testing and debugging a website, the !important declaration is effective. If you are not sure why a style is not being applied, and you think it might be a conflict of specificity, add the !important declaration to your style to see whether that fixes it. If it does, change the order of selectors and remove the !important directives from your production code.

Overusing !important will eventually litter your stylesheet and drastically alter CSS processing. This creates maintenance issues and is not recommended for long-term projects.

Use !important for debugging, or in some cases, when you simply need to override an inline style that is part of a theme or template framework. Even then, use this technique sparingly and aim to write clean stylesheets that respect the cascade.

Where to Use the ``!important`` Rule

There can be cases when it is okay to use the !important rule. These are the following cases:

Overriding styles in a user stylesheet

Here is what !important was created for in the first point: to give the user an opportunity to override the styles of the website. It's used a lot by convenience tools such as screen readers, ad blockers, and more.

Overriding 3rd party code and inline styles

You should aspire as a developer to have as much control over your code as possible, but there are cases where your hands are tied, and you just have to work with anything that is present. Use !important sparingly.

Utility classes

Probably a good case is utility classes. Let’s consider the buttons. If you have a class name like .button on your website and whatever element you put it on, you want that element to appear like a button: exact font, rounded corners, special background and borders, anything. You can try the following.

Example of adding a button:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 1px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <a href="#" class="button">BUTTON</a>
  </body>
</html>

Try it Yourself »

Once that element has some other selector affecting it that has a higher specificity, you can have styling troubles like the following.

Example of adding a button without the !important rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 3px solid #666;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>This is a
        <a href="#" class="button">BUTTON</a>
      </p>
    </section>
  </body>
</html>

Try it Yourself »

We can see that the buttons for which we have a specific design have a dashed green bottom border, which is not what we expected. It's simple and often perfectly valid to set a CSS selector that has a higher specificity.

To prevent the button styles from being easily overridden, you can add !important to specific values. Here is an example:

Example of adding a button with the !important rule:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <style>
      #mybutton a {
        border-bottom: 3px dashed #8ebf42;
      }
      .button {
        background: #1c87c9;
        color: white;
        font-weight: bold;
        padding: 5px;
        border-radius: 4px;
        border: 3px solid #666 !important;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>This is a
        <a href="#" class="button">BUTTON</a>
      </p>
    </section>
  </body>
</html>

Try it Yourself »

User Style Sheets

This mechanism was designed to help users override author styles that hinder readability or usability. If a user defines a stylesheet, it is normally overridden by the author's stylesheet. However, if the user marks a rule with !important, it overrides the author's stylesheet, even if the author also uses !important. This supports accessibility, allowing users to enforce requirements like larger fonts or specific color contrasts. As a developer, you should use !important sparingly to avoid interfering with these user preferences.

Warning

It is NOT recommended to use the !important rule frequently in your CSS. Overusing it creates cascade conflicts that are difficult to maintain. While another !important declaration, an inline style with !important, or modern CSS @layer rules can override it, relying on these workarounds leads to fragile code. Always aim to resolve specificity issues through proper selector structure instead.

How to Apply the !important Rule in CSS

Example of using the !important rule:

When to Use the !important Rule

Where to Use the <span class="property">!important</span> Rule

Example of adding a button:

Example of adding a button without the !important rule:

Example of adding a button with the !important rule:

User Style Sheets

Where to Use the `<span class="property">`!important`</span>` Rule