Lesson 5

Use Coding Tools to View and Edit Styles

 

In this lesson, you will collapse, then expand the code for the about_us page to view the code for the styles.  You will then move the embedded style for the horizontal rule to the external style sheet file.

 

 Collapse Code

  1. Verify that the about_us page is open, then change to Code View
  2. Scroll up the page to display the code that links the external style sheet, su_styles.css, to the page--the code will probably be on or close to line 7 in the head section
  3. Select the line of code under the line with the su_styles.css link (It reads ), then drag down to select all of the code down to the line of code that includes the style for the horizontal rule
  4. Click the Minus Sign in the last line of selected code to collapse all of the code that is selected--you can now see both code fragments--before and after the collapsed code section,--the plus sign next to the line of code indicates that there is hidden code--you also see a gap in the line numbers where the hidden code resides

Summary:  You collapsed a block of code in Code View to be able to see two non-adjacent sections of the code at the same time.

 

Expand Code

  1.  Click the plus sign on line 8 to expand the code
  2. Click in the page to deselect the code—all line numbers are visible again

Summary:  You expanded the code to display all lines of the code again.

 

Move an Embedded Style to an External CSS Style Sheet

  1.  Select the three lines of code that format the style for the horizontal rule on the about_us page—the code will be on or close to lines 67 through 69
  2. Right-click the selected code, point to CSS Styles, then click Move CSS Rules
    [TIP:  You can also convert a rule in the CSS Styles panel—to do this, right-click the rule name, then click Move CSS
    Rules]
  3. In the Move to External Style Sheet dialog box, verify that su_styles.css appears in the Style Sheet text box, then click OK
  4. Verify that the style has been moved to the external style sheet file
    [TIP:  The name of the trash can icon in the CSS Rules panel changes depending on whether you have a rule, a style sheet file, or an embedded style tag selected]
  5. Save and close all open files

Summary:   You moved an embedded style for a horizontal rule to an external CSS style sheet.