What Does !important Mean in CSS?

!important Forces a Change in the Cascade

CSS code printed out
Image courtesy E+ / Getty Images

One of the best ways to learn how to code websites is to look at the source codes of other sites. This practice is how many web professionals learned their craft, especially in the days before there were so many options for web design courses, books, and online training sites.

If you try this practice and look at a site's cascading style sheets (CSS), one thing you may see in that code is a line that says !important. What does that mean and, just as importantly, how do you correctly use that declaration in your stylesheets? 

The Cascade of CSS

First of all, it's important to understand that cascading style sheets do indeed cascade, meaning they are placed in a particular order. In general, this means that the styles are applied in the order they are read by the browser. The first style is applied and then the second and so on.

As a result, if a style appears at the top of a style sheet and then is changed lower down in the document, the second instance of that style is the one applied in subsequent instances, not the first. Basically, if two styles are saying the same thing (which means they have the same level of specificity), the last one listed will be used.

For example, let's imagine that the following styles were contained in a style sheet. The paragraph text would be rendered in black, even though the first style property applied is red. This is because the "black" value is listed second. Since CSS is read top-to-bottom, the final style is "black" and therefore that one wins.

p { color: red; }
p { color: black; }

How !important Changes the Priority

Now that you understand how these nearly identical rules are processed by CSS, we can look at how the !important directive changes things a bit.

The !important directive affects the way in which your CSS cascades while following the rules you feel are most crucial and should be applied. A rule that has the !important directive is always applied no matter where that rule appears in the CSS document.

To make the paragraph text always red, from the above example, you will use:

p { color: red !important; }
p { color: black; }

Now all the text will appear in red, even though the "black" value is listed second. The !important directive overrides the normal rules of the cascade and it gives that style very high specificity.

If you absolutely needed the paragraphs to appear red, this style would do it, but that doesn't mean that this is a good practice. Let's next look at when you may want to use !important and when it is not appropriate.

When to Use !important

The !important directive is very helpful when you are testing and debugging a website. If you are not sure why a style is not being applied and think it may be a specificity issue, you can add the !important declaration to your style to see if that fixes it.

If adding !important does indeed fix the style problem, you have just determined that it is a specificity issue. However, you do not want to leave that !important code in place, it was only put there for testing purposes.

Since testing is done, you should now remove that directive and adjust your selector to achieve the specificity that you need to get your style working. !important should not make its way into your production sites, in part because of how it changes the normal cascade.

If you lean too heavily on the !important declaration to achieve your desired styles, you will eventually have a style sheet littered with !important styles. You will be fundamentally changing the way that page's CSS is processed. It is a lazy practice that is not good from a long-term management standpoint.

Use !important for testing or, in some cases, when you absolutely must override an inline style that is part of a theme or template framework. Even in those cases, use this approach as sparingly as possible and instead strive to write clean style sheets that understand the cascade.

User Style Sheets

There is one final note on the !important directive that is essential to understand. This directive was also put in place to help web page users cope with style sheets that make pages difficult for them to use or read.

Typically, if a user defines a style sheet to view web pages, that style sheet is overruled by the web page author's style sheet. If the user marks a style as !important, that style overrules the web page author's style sheet, even if the author marks a rule as !important.

This is helpful for users who need to set styles in a certain way. For instance, someone may need to increase default font sizes on all web pages they use. By using your !important directive sparingly within the pages you build, you accommodate any special needs your users may have.