Lesson 4

Work with Conflicting Styles


In this lesson, you will discover that embedded styles have precedence over styles redefining HTML tags.


Compare Conflicting Styles

  1. Open the about_us page
  2. Click the New CSS Rule button (on the CSS Styles panel), click the Selector Type list arrow, click Tag (redefines an HTML element), click the Selector Name list arrow, click body, click the Rule Definition list arrow, click (This document only), then click ‘OK’
  3. Click the Font-family list arrow, click Georgia, Times New Roman, Times, serif, then click ‘OK’—the body style is listed in the CSS Styles panel as an embedded style, specifying  that all text in the body of the page be displayed using the Georgia, Times New Roman, Times, serif font family—however, the text on the page did not change because the body_text style from the su_styles.css file takes precedence over the style that changed the body tag
  4. Select the last sentence on the page beginning “Please do not step…”, click the CSS button (on the Property inspector), click the Targeted Rule list arrow, then click —when the paragraph_text style is removed, the style from the body tag is applied
  5. Click Edit (on the Application bar), then click Undo Apply to apply the paragraph_text style again
  6. Delete the body style from the CSS Styles panel

Summary:  You found that an embedded style has precedence over a style redefining an HTML tag.