Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

160 CHAPTER 4 Getting started with CSS3

To solve this problem, in the user-defined style sheet, you can add the “!important” modi-

fier after the CSS value to increase its priority. The “!important” modifier in the user-defined

style sheet overrides any value from the HTML document’s style sheet, even if the “!impor-

tant” modifier is used in the HTML document’s style sheet. This is the most appropriate use of

the “!important” modifier.

Although you can use the “!important” modifier with your HTML document’s style sheets,

it’s not good practice to do so. It’s equivalent to using a jackhammer on a finish nail.

The following is an example of a user-defined CSS file that overrides the background color

and text color of the body element.

@charset 'UTF-8';

body {

background-color: white !important;

color: black !important;

}

Remember that the user-defined style sheet settings have a lower priority than the HTML

document’s style sheets except when the “!important” modifier is used in the user-defined

style sheet. In this case, the user-defined style has the highest priority.

How do styles cascade?

It’s important to understand how styles are resolved by the browser when style rules conflict.

The following is the order of precedence the browser uses to calculate the effective style of

an element.

1. Important he browser must determine whether the “!important” modifier has been T
   used. This has the highest priority, so if the “!important” modifier is found, it takes
   precedence over the specificity or textual order.


2. Specificity he browser determines which rule is most specific and, if the browser T
   can determine which rule is most specific, there is no need to examine the textual
   order.


3. Textual Order The browser determines the textual order of the style rules where the
   last style rule in textual order has precedence over prior style rules.
   Style rules can be defined in several style sheets, and it’s important to understand these
   style sheets, especially their relationship to the textual order. The following list describes the
   evaluation order of the various style sheets.


4. Browser’s built-in style sheet


5. User’s normal declarations in the user style sheet


6. Author’s normal declarations in the author style sheet


7. Author’s important declarations in the author style sheet


8. User’s important declarations in the user style sheet