Cascading Style Sheets and Dreamweaver

This part of the workshop uses Dreamweaver 8 to create style sheets. Instead of moving from a local to global use of style sheets, we'll do the opposite. The rules will be made globally and then we'll override them.

Open Dreamweaver and a page to practice on:

  1. Open Dreamweaver
  2. Go to "File" menu
  3. Choose "Open..."
  4. Locate the folder "CSSExercises"
  5. Open the folder "CSSExercises"
  6. Open "StyleMe.html"

External Style Sheet

To make an external style sheet for the page "StyleMe.html":

  1. control-click (Mac OS) or right-click (Windows) in the edit window
  2. choose "CSS Styles>New..." (see "Figure 2: New CSS Rule")
    Figure 2: New CSS Rule

    Figure 2: New CSS Rule

  3. click on "Tag (redefines the look of a specific tag"
  4. in the "Tag:" field, choose "p" from the drop-down menu
  5. next to "Define in:" click on the radio button next to the drop-down menu
  6. choose "New Style Sheet File"
  7. click "OK"
  8. in the dialog box that pops up, name the file "ExternalStyleSheet"
  9. save the file in your "CSSExercises" folder
  10. click "OK"

You'll get the window in "Figure 3: CSS Rule Definition for p in ExternalStyleSheet.css dialog box."

Figure 3: CSS Rule Definition for p in ExternalStyleSheet.css dialog box

Figure 3: CSS Rule Definition for p in ExternalStyleSheet.css dialog box

Using the category "Type":

  1. in the "Font:" box type "sans-serif"
  2. in the "Size:" box type "2.0"
  3. choose "ems" from the drop-down menu to the right of the "Size:" box
  4. click "OK"
  5. click "Save"
  6. click "Done"

Notice the increased font size and the change from a serif font to sans-serif.

Rule Embedded in the Page

This process is similar to the one you just completed.

  1. control-click (Mac OS) or right-click (Windows) in the edit window
  2. choose "CSS Styles>New..." (see "Figure 4: New CSS Rule dialog box")
    Figure 4: New CSS Rule dialog box

    Figure 4: New CSS Rule dialog box

  3. choose "Tag (redefines the look of a specific tag)"
  4. in the "Tag:" field, choose "p" from the drop-down menu
  5. next to "Define in:" click on the radio button next to "This document only"
  6. click "OK"

Using the category "Type":

  1. in the "Font:" box type "serif"
  2. in the "Size:" box type "0.8"
  3. choose "ems" from the drop-down menu to the right of the "Size:" box
  4. click "OK"

Notice the decreased font size and the change back to a serif font. The style rule in the page overrides the external style sheet rule.

Rule in the HTML Tag

  1. click in the sentence "Here is some text."
  2. at the bottom of the edit window, control-click (Mac OS) or right-click (Windows) on the <p> tag
  3. choose "Quick Tag Editor..."
  4. hit the "space" bar on your keyboard
  5. type: style="font-size:4.0em"
  6. click in the edit window

Notice the increased font size. The rule in the HTML tag increased the size, but the rule embedded in the page made it a serif font. Both override the external style sheet!