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 is then 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 contained the following styles.

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 concluding is "black" so it wins.

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

How to Apply !important Rule in CSS?

The !important CSS rule adds more authority (importance) than any other property. In CSS, the !important means that "this is important", ignore all the consequent rules, and apply the !important rule. This rule must be set at the end of the line, directly before the semicolon.

p { 
color: green !important; 
}

However, for balance, an !important declaration (the delimiter token "!" and the keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain !important declarations, and user !important rules override author !important rules. This CSS feature improves the accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

Declaring a shorthand property (e.g., color) to be !important is equivalent to declaring all of its sub-properties to be !important. Hence, it is used for overriding the styles that are previously represented in other style origins, in order to produce a particular design.

Let’s see an example for having a clear image.

Example of the !important rule:

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the Document</title>
    <style> 
      body { 
      background-color: #1c87c9 !important; 
      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, Java Script, PHP, etc.</p>
  </body>
</html>

In the given example, the background color of the body is blue instead of yellow and the heading is gray instead of green color. This is because the !important rule is applied.

When to Use !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 if that fixes it, and if it does, change the order of the selectors and remove the !important directives from your production code.

You will eventually have a style sheet littered with !important styles if you lean too heavily on the !important statement to achieve your desired styles. You will dramatically change the processing of the CSS page. This is a lazy practice from a long-term management point of view that is not useful.

Use the !important for checking out or, in some cases, whilst you simply need to override an inline style that is a part of a theme or template framework. Even in those instances, use this technique sparingly and as a substitute write clean style sheets that honor the cascade.

Where is it the right place to use them !important rule?

There can be cases when is it 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 Cases

Possibly 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. so that you can try this:

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>

The specificity for that is 0,0,1,0. As quickly as that element has some other selector affecting it that has a higher specificity, you can have styling troubles like this:

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>

Then, we can see that the buttons that have a specific design to 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 value than 0,0,1,0 and randomly screws up a button.

I order to make your button class higher and not easily changed with, put !important rules on the values that should be advantageous. Here goes the example where the button, with !important rules, is applied.

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 !important; 
      color: white !important;
      font-weight: bold !important;
      padding: 5px !important;
      border-radius: 4px !important;
      border: 3px solid #666 !important;
      text-decoration: none !important;
      }
    </style>
  </head>
  <body>
    <section id="mybutton">
      <p>This is a <a href="#" class="button">BUTTON</a>
      </p>
    </section>
  </body>
</html>

User Style Sheets

This directive was additionally put in place to help web page users cope with style sheets that make it hard for them to use or read pages.

If somebody defines a style sheet for viewing web pages, the style sheet will be overridden by the style sheet of the page author. If the user is marking a style like the !important, this style overrides the style sheet of the web page author, even if the author selects a rule like !important.

This structure is useful for users who somehow need to set styles. For example, on all web pages they use, a visually impaired reader may need to increase the default font sizes. By using the !important directive sparingly within the pages you build, you provide your users’ individual requirements.

It is NOT recommended to use the !important rule for your CSS very often because the only thing that can override an !important declaration is another !important declaration. By using it once, you potentially end up with a CSS file that is full of !important rules, which is not good.

Do you find this helpful?

Related articles