Lesson 2

Modify Embedded Styles

 

In this lesson, you will modify the contact_info style, redefine an HTML tag, edit an embedded style, and then delete an embedded style.

 

Modify a custom style

  1. Click the contact_info rule in the CSS Styles panel, then click the Edit Rule button
  2. Change the Color to #006
  3. Click OK, then save and close the index page—the text with the contact, info style applied to it automatically changed to reflect the changes that you make to the rule

Summary:  You made a formatting change to the Type category of the contact_info rule.  You then saw this change reflected in text with the contact_info style applied to it.

 

Redefine an HTML tag

  1. Open the about_us page, then click the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box
  2. Click the Selector Type list arrow, click the Tag (redefines an HTML element), click the Selector Name list arrow, scroll down, click ‘hr’, click the Rule Definition list arrow, then click (This document only)—the hr tag is the tag that creates a horizontal rule
    [TIP:  To scroll quickly to the tags that begin with the letter h, type ‘h’ after you click the Tag list arrow]
  3. Click OK to open the CSS Rule definition for hr dialog box, set the Color to #006, then click OK—the horizontal rule in the middle of the page changed to blue because the rule definition has changed the way a horizontal rule is rendered
  4. Using Steps 1 through 3 as a guide, create a new CSS rule that redefines the body HTML tag, by using the Background category rather that the Type category to set the Background color to #FCC, then click OK—the page now has a yellow background. (The page background is behind the CSS container with all of the page content—you may need to collapse your panels to see it)
  5. Switch to Code to view to view the code that changes the properties for the horizontal rule—because these are embedded styles, the code for the styles is embedded styles, the code for the styles is embedded into the page in the head section of the code—the style changing the background page color to yellow overrode the white page background color that you defined earlier by using the Page Properties dialog box
  6. Scroll up in the code, if necessary, to find the code that links the external style sheet file—you cannot see the individual rule properties, because the file is linked, not embedded—if you open the su-styles.css file, however, you will see the rules and properties listed
    [TIP:  If you have two embedded styles, you can tell which style takes precedence are positioned to the right of other
    tags in the tag selector]

Summary:  You used the New CSS Rule dialog box to redefine the hr and body HTML tags.  You also viewed the code for the new embedded styles and the code that links the external style sheet file.

 

Edit an embedded style

  1. Switch to Design view, then view the external and embedded styles for the about_us page in the CSS Styles panel
  2. Click the hr style in the CSS Styles panel—the properties of the hr rule are displayed in the Properties pane
  3. Click the color picker in the Properties pane, click color swatch #039 to change the horizontal rule to a lighter blue

Summary:  You used the CSS Styles panel to change the color settings for the hr embedded style.

 

Delete an embedded style

  1. Click the .body rule at the bottom of the list of rules in the CSS Styles panel to select it
  2. Click the Delete CSS Rule button—the body rule is removed from the CSS Styles panel—the page background changes back to white
    [TIP:  You can also delete an embedded style by right-clicking the rule in the CSS Styles panel, then clicking Delete]
  3. Save your changes to your server folder, then close the about_us page

Summary:  You used the CCSS Styles panel to delete the body rule.