Quiz 4: Style Sheet Wizardry

• Link One
• Link Two
• Link Three
• Link Four

Typography

1. Specify Verdana or Helvetica or a sans-serif font as the default for the page.
2. Specify one or more serif fonts for the banner heading.
3. Specify small caps for the secondary headings.
4. Specify a line height that will look like 1 1/2 spacing.

Positioning

The banner heading should stretch across the width of the page but the whole page should occupy 80% of the window width. If you can, center the page, put a 2px border in red around it, and put a light gray background color in the remainder of the window. (Don't worry if you don't know how to do the centering trick.)

The main information area of the page should create a column on the left that occupies 75% of page. The column on the right should contain the "advertisements" (the first three of which are images named ad1.gif, ad2.gif, and ad3.gif) and occupy 25% of the page.

Navigating

Using the unordered list above, create horizontal navigational "buttons" just under the banner, flush left. Either put a border around the buttons and have the buttons (but not the border) change color when someone mouses over the links, or use the bottom border as an underline that shows up when someone mouses over the link.

---

---

Turning It In

1. Create a "footer" area of your page. Include your name and a (regular) link to your css document, like this: q4style.css.
2. Create a directory called Q4.
3. Put your style sheet in the styles directory that you should already have at the root of your directory.
4. Upload everything to your Web site and create a link to this quiz from your home page.