About conflicting CSS rules

When you apply two or more CSS rules to the same text, the rules might conflict and produce unexpected results. Browsers apply CSS rules as follows:

• If two rules are applied to the same text, the browser displays all attributes of both rules unless specific attributes conflict. For example, one rule may specify blue as the text color and the other rule may specify red as the text color.
• If attributes from two rules applied to the same text conflict, the browser displays the attribute of the innermost rule (the rule closest to the text itself). Thus, if a text element has both an external style sheet and an inline style affecting it, the inline style is applied.
• If there is a direct conflict, the attributes from custom CSS rules (rules applied with the class attribute) override 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 rule .Blue applied to this paragraph overrides the color setting in the h1 style. The second custom CSS rule .Red overrides .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>