Cascading order and specificity
Conflicting rules are common in cascading style sheets, which enable styles from multiple style sheet sources to be applied to an element in an HTML document.
When two or more declarations are applied to the same element, there may be a conflict between them. Understanding how cascading style sheet rules are applied to an element can help you troubleshoot formatting errors.
Inheritance
Every element in an HTML page exists somewhere in the document object model (DOM) tree, the root of which is the HTML element. Elements to which cascading style sheet rules can be applied almost always belong to the BODY element. Any element, starting with the BODY element, can have a style applied to it. In most cases, an element inherits the style of its parent element in the DOM.
An unformatted P element inherits any style configured for its parent, the BODY element. An element defined by <p class="style1"> inherits the styles of its parent element and the style defined for its class in the style sheet, in the rule p.style1. If there is a conflict between the style of the parent and the style rule in the style sheet, the style sheet rule p.style1 takes precedence.
For example, if the style sheet contains a rule for p that sets the color to red (p { color: #F00; }) and also contains a rule for p.style1 that sets the color to blue (p.style1 { color: #00F; }), the text in the element <p class="style1"> will be displayed as blue.
Order of precedence
Style rules are applied in the order in which they appear. For example, if an HTML page contains both a link to an external style sheet and a conflicting style definition in the page header, the style sheet rules are applied first, and then the style rules that are defined in the page header are applied, overriding any rules that are defined in the external style sheet.
If a page contains a link to two external style sheets, the rules in the second style sheet listed take precedence over the rules in the first style sheet.
Style rules are applied in the following order:
External style sheet reference.
If there are conflicting rules in an external style sheet, the last instance takes precedence.
If there are multiple external style sheets, rules are applied in the order in which the style sheets are listed. For example, if a page includes three style sheet links, rules in the second style sheet take precedence over conflicting rules in the first style sheet, and conflicting rules in the third style sheet take precedence over both the first and second style sheets.
HTML page header style declarations.
If there are any conflicts within the page header style rules, the last instance takes precedence.
HTML page inline style declarations.
If an HTML tag contains an explicit style rule, for example,
<p style=color:#0F0;">, the rule defined in the tag takes precedence over HTML page header rules and external style sheet rules.
Link pseudo-class selectors
Because of the order of precedence, :link pseudo-class selectors must be declared in the following order to work correctly:
a:link {}
a:visited {}
a:hover {}
a:active {}
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.