Inserting and Formatting Text > Using CSS style sheets > About conflicting styles

About conflicting styles

When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes according to the following rules:

	If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, one style may specify blue as the text color and the other style may specify red.
	If attributes from two styles applied to the same text conflict, the browser displays the attribute of the innermost style (the style closest to the text itself).
	If there is a direct conflict, the attributes from CSS styles (styles applied with the class attribute) overrule attributes from HTML tag styles.

In the example that follows, the style defined for h1 might specify the font, size, and color for all h1 paragraphs, but the custom CSS style .Blue applied to this paragraph overrules the color setting in the H1 style. The second custom CSS style .Red overrules .Blue because it is inside the .Blue style.

<h1><span class="Blue">This paragraph is controlled by the .Blue custom style and h1
HTML tag style.<span class="Red">Except this sentence is controlled by the .Red style.</span>
Now we're back to the .Blue style.</span></h1>