When you apply two or more CSS rules to the same text, the rules can conflict and produce unexpected results. The browser applies CSS rules as follows:
If two rules are applied to the same text, the browser displays all properties of both rules, unless specific properties conflict. For example, one rule might specify that the text color be blue, while another rule might specify that the text color be red.
If the properties of two rules that apply to the same text conflict, the browser displays the properties of the innermost rule (the rule closest to the text itself). Therefore, if both an external style sheet and an inline style affect a text element, the inline style is applied.
Properties in custom CSS rules (rules applied using the class attribute) will override properties in HTML tag styles if there is a direct conflict.
In the following example, the style defined for h1 specifies the font, size, and color of all h1 paragraphs, but the custom CSS rule .Blue applied to that paragraph will override the color settings in the h1 style. Another custom CSS rule, .Red, will override .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>