CSS !important Rule: How to Use It Correctly

Follow us on LinkedIn for our latest data and tips!

The CSS !important rule approaches us like a fake savior angel in our darkest times while we are trying to make something work in CSS. It is a great option to have for sure, but are we really using it in the correct way and only in cases where we have no other option? In this post, we will take a detailed look at what !important rule is and how it should and shouldn’t be used by giving some explanatory examples.

How Cascaded Style Sheets Work

In order to understand how the !important rule works, you will first need to understand how cascaded style sheets work. As the name implies, the styles in cascaded style sheets are processed by the web browser in a certain order. The first order is based on the source of the style sheets and can be listed as the following by increasing importance:

  • 1. Browser styles. These are the default styles declared by the web browser.
  • 2. User styles. These are the custom styles the user declares using browser’s user style sheets.
  • 3. Author styles. These are the styles the developer of the website declares in CSS style sheets.
  • 4. !important author styles. Author styles with !important rules.
  • 5. !important user styles. User styles with !important rules.

In addition to the above precedence order of styles, the order of importance for the style sheets within the author styles is as follows:

  • 1. External style sheets, which are located in separate .css files.
  • 2. Internal style sheets, which are located in the same document, usually within the <head> element.
  • 3. Inline style sheets, which are applied to specific elements at the point where they appear within the HTML code.

For example, if you apply the same CSS property with different values to the same element once in the external stylesheet, once within the head element and once inline, the value of the inline style will be taken into account. As an example, let’s say that you have the following in your style.css file:

p { margin: 20px }

And the following in your HTML document:

    p { margin: 15px }

<p style="margin: 10px">Sample paragraph.</p>

In this case, the effective margin value for the paragraph element will be 10px, which is specified as an inline style.

In addition to these orders, specificity, a measure applied to CSS declarations to determine their weights, or importance in other words, is used in order to render the web pages properly within the browser window.

Now that we’ve seen how the cascaded style sheets work, we can continue with how the !important rule works.

How CSS !important Rule Works

As demonstrated in the above section, CSS has a natural order of importance assigned to declarations depending on where they are located. The !important statement is used for breaking this order and adding weight to a specific declaration to put it in effect, ignoring the others. It is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design or layout goal.

Here is a simple example:

a { color: #333 !important; }

This will render all the links on the page with #333 color regardless of what other CSS declarations are made that are affecting the link elements. As you can see from the above example, the !important keyword must be placed at the end of the declaration, after the property value and before the semicolon. In the example below, the font-size of the paragraphs is overridden by !important rule in the first declaration, even though the second declaration should have been in effect considering the natural flow of CSS.

p { font-size: 18px !important; }
#container p { font-size: 16px; }

Initially, the !important rule was introduced for use in user style sheets as a means for providing the ability to the user to modify the style of a web page to fit their needs (e.g. increase font size, make background color lighter, etc.) but eventually it became a tool that is now widely used by most CSS authors, and often times improperly. You can also check the CSS 2 specification to learn how the !important rule is defined.

Why CSS !important Should Be Used Carefully

Getting used to the !important declaration in CSS is very easy, but it is also a bad habit for a web developer since it leads to missing or ignoring the real underlying issues in the HTML structure and the corresponding CSS styles that should better be fixed in other ways. Especially in large web projects where multiple people work on the same style files, bandaging issues with the easy choice of applying !important rules will cause the issues to grow further as the development continues.

The !important rule also makes it hard for the user to apply their own styles for better readability or accessibility while viewing your website. Not only that but also the more !important rules you use, the more difficult your CSS code will become to read and maintain. For these reasons, it should be used only where it is absolutely necessary (in very few occasions) and when there is no other option. In most cases, it is possible to get rid of the need for using !important rules by simply changing the HTML tags on your page or assigning new CSS selectors to them.

Possible Good Uses of !important Rule

Custom user style sheets are the main use case for the !important rule as they let the user to modify the layout and style of the websites they are viewing to fit their needs. Most browsers allow to have user styles where you can apply your own CSS rules, sometimes with the help of browser extensions.

Another use case is when you are working with remote (third party) style files and JS scripts on your site and you need to modify the styles to suit your needs. Also, the !important rule comes in handy when overriding the style changes made by JavaScript on the fly.

It may not be considered as a must but often times, applying a different style to a smaller group of a certain class of elements will be possible with !important. For example, you have a .button class that you use on different places across your site but it is also affected by the style of certain elements containing it. In this case, applying !important to the .button class to preserve its style across different sections might be quite helpful.

One other use of !important rule is while testing your designs and while inspecting web pages using the developer tools console of the web browsers.

How to Override !important in CSS

The !important rule is used for overriding the previously assigned CSS declarations. But it is also possible to override itself. You can override the !important rule, naturally by another one. The overriding !important rule should be declared lower on the CSS flow and it should have the same or higher level of specificity in order to be in effect.

img { border: none !important; }
#article img { border: 2px solid #fff !important; }

This is how the CSS !important rule works and hopefully this post will help you in deciding where to use it and where not to use it.