Lesson 3

Work with External CSS Style Sheets

 

In this lesson, you will make formatting changes in the style sheet and see those changes reflected on pages.  You will also add hyperlink styles and custom code to the su_styles style sheet.  Finally, you will delete a style from the su_styles style sheet.

 

Modify an External CSS Style Sheet

  1. Open the activities page, then click OK to close the Design Notes dialog box
  2. Double-click the su-styles .css file in the root folder in the Files panel--the su-styles.css file opens  the Document window
  3. Switch back to the activities page, then click the New CSS Rule button
  4. Click the Selector Type list arrow, then click Compound (based on your selection)
  5. Click the Selector Name list arrow, click a:link, click the Rule Definition list arrow, click su_styles.css, then click OK
  6. Set the Font-family to Arial, Helvetica, sans-serif; set the Font-size to small; set the Font-weight to bold; set the Color to #036, then click OK
  7. Click the su_styles.css tab to view the file in the Document window--the su_styles.css page now contains new code that reflects the font settings you specified for the a:link style
  8. Save your changes, switch to the activities page, scroll down the page, then notice that the fishing excursions and dolphin cruises page links now appear a different shade of blue, reflecting the formatting changes that you made to the a:link rule

Summary:  You opened the su_styles.css file and made modifications to the a:link rule using the CSS Rule Definition dialog box

 

Add Hyperlink Styles

  1. 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 Compound (based on your selection), click the Selector Name list arrow, then click a:hover
  3. Click the Rule Definition list arrow click su_styles.css, then click ‘OK’ to open the CSS Rule definition for a:hover in the su_styles.css dialog box
  4. Set the Font-family to Arial, Helvetica, sans-serif; set the Font-size to small; set the Font-weight to bold; set the Color
    to #06C; then click ‘OK’—the su_styles.css page now contains new code that reflects the font specifications you set for the a:hover style
  5. Click File (on the Application bar), click Save All to save both pages, preview the page in your browser, position the mouse pointer  over the Blue Angels link—the links in the paragraph text appear in medium blue when the mouse pointer hovers over them, reflecting the formatting changes that you made to the a:hover style
  6. Close your browser, then close the activities page

Summary:  You modified the a:hover style using the CSS Rule definition dialog box.

 

Add Custom Code to a Style Sheet

  1. Open the spa page, then switch to the su_styles.css file
  2. Locate the .bold_blue style code in the style sheet, then replace the font  size with small
  3. Switch to the spa page—the text with the .bold_blue style is smaller now and looks better on the page
  4.  Close the spa page, then save the su_styles.css page

Summary:  You opened the su_styles.css file and make changes to the bold_blue rule directly in the code.

 

Use Code View to Delete External Styles from a Style Sheet

  1. Open the su_styles.css file, select the a:link tag and the five lines of code below it
  2. Press (Delete), then save your changes—the a:link style no longer appears in the CSS Styles panel
  3. Open the activities page, close the Design Notes dialog box, then preview the page in your browser—the activities page text links no longer appear as bold, indicating that the a:link style has been deleted from the style sheet
    [TIP:  You can detach a style sheet from a template or web page by clicking the style sheet file in the CSS Styles
    panel, then clicking the Unlink CSS Style sheet button—when you do this, the file is no longer linked to the web page, but it is not actually deleted; it remains in its original location on your computer]
  4.  Close the browser, then close all open files

Summary:  You deleted the a:link style from the su_styles.css file and then saved your changes.