What Does !important Mean in CSS?

!important forces a change in the cascade

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, one thing you may see in that code is a line that says !important. This term changes the priority of processing within the style sheet.

CSS coding.
E+ / Getty Images

The Cascade of CSS

Cascading style sheets do indeed cascade, meaning they are placed in a particular order. In general, 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

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 this directive is always applied no matter where that rule appears in the CSS document.

To make the paragraph text always red, from the previous example, change the style as follows:

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.

When to Use !important

The !important directive is 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 conflict, 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.

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 sparingly and instead write clean style sheets that honor the cascade.

User Style Sheets

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.

When someone defines a style sheet to view web pages, that style sheet is overruled by the 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 hierarchy is helpful for users who need to set styles in a certain way. For example, a visually impaired reader 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 your readers' unique needs.