Lab 10: Style Sheets


  1. Review Lecture 10b.
  2. Create a folder named weblab10 in your folder.
  3. Copy your frameset and other files from weblab8 into weblab10.

Add Embedded Styles to the Navigation Bar

  1. Open nav.html in a text editor.
  2. Add a style tag to the head section of the document.
  3. Specify a background colour for the navigation page.
  4. Specify a different background colour for when the user moves the mouse over a link.
  5. Also specify a different text style for mouseover, using any two of the following:
  6. Save your changes and test in a browser by opening default.html and clicking a link in the navigation bar.

Create a Style Sheet

  1. Open a new file in a text editor.
  2. Specify a sans-serif font and 30-pixel margin for body text.
  3. Specify a different colour, a sans-serif font and larger letter spacing for all heading 1, 2 and 3 tags.
  4. Save as styles.css.

Add the Style Sheet to Content Pages

Submit the Assignment

  1. Use Ark to compress your weblab10 folder to
  2. Send the file as an e-mail attachment to with subject line web lab 10.