Lab 10: Style Sheets

Setup

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:
   • font weight, size, style or variant; text decoration or transform
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

• Open home.html in a text editor.
• In the head section, add a link tag to use the stylesheet you just created.
• Repeat for the other content pages (educ.html, hobbies.html, links.html, form.html).
• Save your changes and test all pages in a browser by opening default.html.

Submit the Assignment

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