Cascading Style Sheets/Important

Overview
The  keyword makes a declaration take precedence over normal declarations—those that are not tagged with the   keyword. So "p { color: red ! important }" takes precedence over "p { color: green }".

The syntax for an important declaration is
 * property: value ! important

The relative importance of a rule also depends on its the source: whether it comes from a style sheet specified by the document author, the user or the user agent.

The order of declarations from least important to most important: User important declarations take precedence over everything else. This allows users to override the page designer's presentation to meet their needs. For example a user could override the text colours to be yellow on black in a large font to make the text easier to read.
 * 1) user agent declarations
 * 2) user normal declarations
 * 3) author normal declarations
 * 4) author important declarations
 * 5) user important declarations

The process of determining which of the rules from one or more style sheets applies to a given element is called the cascade, hence the name Cascading Style Sheets.

An Example of the Cascade
The HTML document used for this example is:

The document is styled with the style sheet, :

How will the three paragraphs be presented?

First paragraph
Consider the first paragraph element. The first and third selectors (the  selectors) match the element. The second selector does not match the element. The rules for the two selectors that match are applied to the element. The rules, listed in the order they appear in the source, are: attribute ID selector Class selector Element selector Source order**

background-color #fff p      author normal (rank 3) 0      0       0       1       1       color #000      p       author important (rank 4) 0      0       0       1       2       background-color #9cf p      author normal (rank 3) 0      0       0       1       6       color #00f p      author normal (rank 3) 0      0       0       1       7


 * * The ranks for importance range from 1 (least important) to 5 (most important). Later examples on this page show other ranks.


 * ** The source order column is the position of the declaration in the file, e.g.  is the sixth declaration in the file.

The rules that apply to the element are sorted by property. For each property the rules are sorted in ascending order by importance, then by specificity (style attribute, ID selector, class selector, element selector), then by source order. The last value for the property from the sorted list wins (i.e. the value for the most important, most specific rule).

attribute ID selector Class selector Element selector Source order

background-color #fff p      author normal (rank 3) 0      0       0       1       1        background-color  #9cf p      author normal (rank 3) 0      0       0       1        6

color #00f p      author normal (rank 3) 0      0       0       1       7        color  #000 p       author important (rank 4) 0      0       0       1       2


 * The declarations that are used are shown in bold along with the winning tie-breaker that decided between the rules.

The  is set to   (a pale blue). The two rules for the  property have equal importance and specificity so the second rule wins because it occurs later in the source.

The  is set to   (black). The rules for the  property have different importance so the most important wins.

The first paragraph is rendered: Paragraph 1.

Second paragraph
Consider the second paragraph element. The first and third selectors (the  selectors) match the element. The second selector also matches the element. The rules for all three selectors are applied to the element. The rules, listed in the order they appear in the source, are: attribute ID selector Class selector Element selector Source order

background-color #fff p      author normal (rank 3) 0      0       0       1       1       color #000      p       author important (rank 4) 0      0       0       1       2       background-color #fc9 #para2 author normal (rank 3) 0      1       0       0       3       color #00f #para2 author normal (rank 3) 0      1       0       0       4       border 1px solid black #para2 author normal (rank 3) 0      1       0       0       5       background-color #9cf p      author normal (rank 3) 0      0       0       1       6       color #00f p      author normal (rank 3) 0      0       0       1       7

Sorting the rules gives:

attribute ID selector Class selector Element selector Source order

background-color #fff p      author normal (rank 3) 0      0       0       1       1       background-color #9cf p      author normal (rank 3) 0      0       0       1       6        background-color  #fc9 #para2 author normal (rank 3) 0       1 0      0       3

 border  1px solid black #para2 author normal (rank 3) 0      1       0       0       5

color #00f #para2 author normal (rank 3) 0      1       0       0       4       color #00f p      author normal (rank 3) 0      0       0       1       7        color  #000 p       author important (rank 4) 0      0       0       1       2

The  is set to   (a pale orange). The rule with an ID selector has a higher specificity than the other two rules so it wins.

There is only one rule for the  property so it is set to.

The  is set to   (black). The rules for the  property have different importance so the most important wins.

The second paragraph is rendered: Paragraph 2.

Third paragraph
The third paragraph is matched by exactly the same selectors as the first paragraph and so exactly the same values are applied.

The third paragraph is rendered: <p style="background-color:#9cf;color:#000">Paragraph 3.

Result
<p style="background-color:#9cf;color:#000">Paragraph 1. <p style="background-color:#fc9;color:#000;border:1px solid black">Paragraph 2. <p style="background-color:#9cf;color:#000">Paragraph 3.

Example with a User Style sheet
In this example we will examine how the appearance of the document in the previous example is altered when the following user style sheet,, is combined with the style sheet from the previous example. (See the chapter ../User Style Sheets/ for information on how to set a user style sheet.)

Consider the first paragraph element. The single selector from the user style sheet matches the element. The first and third selectors (the  selectors) from   also match the element. The second selector from   does not match the element. The rules that apply to the element, listed in the order they appear in the source, are: attribute ID selector Class selector Element selector Source order**

color #ff0 p      user important (rank 5) 0      0       0       1       1:1       background-color #808080      p       user normal (rank 2) 0      0       0       1       1:2       font-family cursive p      user normal (rank 2) 0      0       0       1       1:3       background-color #fff p      author normal (rank 3) 0      0       0       1       2:1       color #000      p       author important (rank 4) 0      0       0       1       2:2       background-color #9cf p      author normal (rank 3) 0      0       0       1       2:6       color #00f p      author normal (rank 3) 0      0       0       1       2:7


 * * The ranks for importance range from 1 (least important) to 5 (most important). Notice that rules from the user style sheet are either rank 2 for normal declarations or rank 5 for important declarations.


 * ** The first number in the source order column gives the order the file containing the rule was loaded in. In this case  was loaded before  . The second number is the position of the declaration within the file. E.g.   is the sixth declaration in the second file.

Sorting the rules gives: attribute ID selector Class selector Element selector Source order**

background-color #808080      p       user normal (rank 2) 0      0       0       1       1:2       background-color #fff p      author normal (rank 3) 0      0       0       1       2:1       <td style="background:#ccc"> background-color <td style="background:#ccc"> #9cf p      <td style="background:#ccc"> author normal (rank 3) 0      0       0       1       <td align="center" style="background:#ccc"> 2:6

color #00f p      author normal (rank 3) 0      0       0       1       2:7       color #000      p       author important (rank 4) 0      0       0       1       2:2       <td style="background:#ccc"> color <td style="background:#ccc"> #ff0 p      <td style="background:#ccc"> user important (rank 5) 0      0       0       1       1:1

<td style="background:#ccc"> font-family <td style="background:#ccc"> cursive p      user normal (rank 2) 0      0       0       1       1:3

There are two rules with equal highest importance for the  property. These two rules also have equal specificity so they are split by source order. The background color is set to the author's choice, not the user's choice.

The important declaration for  in the user style sheet has the highest importance for this property so the user's choice of text color is used, not the page author's choice.

The only rule for  is the user's so the user's choice is used.

The paragraphs are rendered: <p style="background-color:#9cf;color:#ff0;font-family:cursive">Paragraph 1. <p style="background-color:#fc9;color:#ff0;border:1px solid black;font-family:cursive">Paragraph 2. <p style="background-color:#9cf;color:#ff0;font-family:cursive">Paragraph 3.

Internet Explorer Bug
This bug is known to occur in Internet Explorer versions 6.0 and 7.0 on Windows XP; however, version 8.0 is unaffected.

There is a bug in Internet Explorer's handling of. If an important declaration for a property is followed by a normal declaration for the same property within the same block Internet Explorer treats both declarations as normal. For example in IE v6.0 the following style sheet incorrectly renders paragraphs as yellow on red. The paragraphs should be white on black because the first two declarations are important.

You can check that the declarations revert to normal by adding an extra rule to the style sheet. In IE v6.0 this gives green on red indicating that all the  declarations are being treated as normal.

If you remove the second  declaration from the first block: the paragraphs become white on red. This shows that the  declaration in the first block in now correctly considered important.

A number of people suggest using this bug as a means of passing Interent Explorer different values from those given to other browsers. A better solution if you need to do this is to use conditional comments.