What Does !important Mean in CSS?

!important Forces a Change in the Cascade

Image courtesy E+ / Getty Images

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. For example, in the following style sheet, the paragraph text of subsequent text is black, even though the first style property applied is red:

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

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 !mportant directive is always applied no matter where that rule appears in the CSS document. If you want to make sure that a property is always applied, add the !important property to the tag. 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, wherever it appears in the document.

User Style Sheets

The !important 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 use of !important changed after CSS1. In CSS1, author !important directives took precedence over user !important directives. Beginning in CSS2, the directive was changed to make the user's style sheet have precedence.