!important

This is all to do with how the browser decides which style to use if there is a conflict. This might happen if there is more than one style sheet associated with the page.

You can set a style as important by specifying ! important. For example:

body { background: url(bar.gif) white; 
            background-repeat: repeat-x ! important }

A style that is set up as important wins out over contradictory styles of otherwise equal weight.

Now, if your page has two style sheets one of yours and a user style sheet, both style sheets may contain !important declarations. In this case, the user !important styles override yours. This is really meant to help users with special requirements (large fonts, color combinations, etc.) control over how the page looks.

Lets assume there are two style sheets set up as follows:

/* From the user’s style sheet */ 
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author’s style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

Here is how !important works:

The first style in the user’s style sheet contains an !important declaration which overrides the corresponding style in the author’s style sheet. Paragraphs indent 1em
The user's second style will also win due to being marked !important. Paragraphs are in italics
The third style in the user’s style sheet is not !important and will, therefore, lose to the second style in the author’s style sheet. Pararaphs will be 12pt and san serif not 18pt
Finally, the third author style will lose to the second author style since the second rule is !important. Pararaphs will be 12pt not 24pt

Note: Declaring a shorthand property (e.g., ’background’) to be !important is equivalent to declaring all of its sub-properties to be !important.