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.
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: 20pxThe 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.
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