Dreamweaver8.0: conflicting CSS rules

When two or more CSS rules are applied to the same text, these rules may conflict and generate unexpected results. The browser applies CSS rules as follows:

• If the two rules are applied to the same text, the browser displays all the attributes of the two rules, unless the specific attributes conflict. For example, one rule may specify the text color as blue, while the other rule may specify the text color as red.
• If the two rules applied to the same text conflict with each other, the browser displays the attribute of the innermost rule (the rule closest to the text itself. Therefore, if both the external style table and the inline style affect the text element, the inline style is applied.
• If there is a direct conflict, the attributes in the custom CSS rule (rules applied using the class attribute) will overwrite the attributes in the HTML tag style.

In the following example, you can specify the font, size, and color of all h1 paragraphs for the style defined for h1, but apply it to the custom CSS rules of this section. blue will overwrite the color settings in the h1 style. Another custom CSS rule. Red will overwrite. Blue because it is inside the Blue style.

<H1> <span class = "Blue"> This paragraph is controlled by. blue custom style and h1HTML tag style. <span class = "Red"> failed t this sentence is controlled by. red style. </span> Now we're back to. blue style. </span>