The !important CSS directive for precedence

Associating !important to a CSS property allows to give priority to it, whatever the position in the stylesheet where it is declared.

The !important declaration is fully implemented in Internet Explorer since version 7. It does not works in quirks mode.

Syntax

.myclass
{
    color: black; !important
}

The directive applies only to the values of property that are defined. In the case of a shorthand (ie border: 2px solid black), it applies to all values of the property.

For example:

font: normal 12px Arial !important
font-size: 20px

The font size will be 12px despite being redefined because the first definition is marked as important.

User stylesheet

The browser user can define his own style sheet that applies to all pages.

In Firefox, it is in the file userContent.css in subdirectories of the program.
In Internet Explorer it is in a file specified in the accessibility options.

By default, the style sheet defined by the author in the page takes precedence over the one user, but this is not the case if the directive!important is added in the latter.

However if the user and the author adds both this directive, the user takes precedence.

Modifying precedences

The role of !important is therefore to override precedences within a style sheet or style sheets between author and user.

Demonstration of the Directive ...

.myclass
{
   font:italic 100% Verdana !important;
   color: green !important;
   font-style:normal;
   color: red;
}

<p class="myclass">This text must be green and in italic.</p>

This text must be green and in italic.

More information

© 2010-2012 Xul.fr