What Does !important Mean in CSS?

!important Forces a Change in the Cascade

CSS
Image courtesy E+ / Getty Images

One of the best ways to learn how to code websites is to look at the sources code from 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 CSS (cascading style sheets),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 style sheets? Let's take a look!

Let's first look at the basics of CSS. Cascading Style Sheets cascade. 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. Bascially, if two styles are saying the same thing (which means they have the same level of specificity), the last one listed "wins". For example, let's image 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, so since CSS is read top-to-bottom, the final style is "black" and therefore that one wins.

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

OK< so now that we 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 write:

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

Now all the text appears 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.

Using !important

The !important directive is very helpful when you are testing a website and debugging. If you are not sure why a style is not being applied and thing it may be a specificity issue, you can add the !important declaration to your style to see if that fixes it. If it does, you have just determined that it is, indeed, a specificity issue - but you do not want to leave that !important code in place! You should 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, 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, but use this approach as sparingly as possible and instead siirve to write clean style sheets that understand the cascade.

User Style Sheets

One final note on !important - 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 a certain way, like increasing default font sizes, you accommodate special needs that they may have.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 6/4/17