1. Technology

What does !important mean in CSS?

Forcing Critical Rules to Disregard the Cascade

By

CSS
Image courtesy E+ / Getty Images

Question: What does !important mean in CSS?

Answer:

Cascading Style Sheets cascade. 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. What this means is that 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 will be the one applied, not the first. For example, in the following style sheet, the paragraph text will be black, even though the first style property applied is red:

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

The !important directive is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important directive will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag. So, to make the paragraph text always red, from the above example, you would write:

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

User Style Sheets

However, the !important directive was also put in place to help web page users cope with style sheets that might make pages difficult for them to use or read. Typically, if a user defines a style sheet to view web pages with, that style sheet will be over-ruled by the web page author's style sheet. But if the user marks a style as !important, that style will overrule the web page author's style sheet, even if the author marks their rule as !important.

This is a change from CSS1 to CSS2. In CSS1, author !important directives took precedence over user !important directives. CSS2 changed this to make the user's style sheet have precedence.

©2014 About.com. All rights reserved.