Experiment 10
(last updated: Oct 8, 2008)

Select font size:
The goal is similar to that of Experiment 9: enhance a page from the raw material using style properties. In this case we're attempting to create a previous incarnation (with some of my own enhancements) of
The President's Message
Create the final product by adding only style rules and class attribute settings within various HTML elements.
  1. Create a folder presmsg and within it, the subfolder images.
  2. Download the starter file presmsg.html to the presmsg folder.
    presmsg.html
  3. Download each of these files and save them into the images subfolder of presmsg.
    h_presidR.jpg
    fade-bg.jpg

The presmsg.html document should now look like this.

Then add style rules and class attributes according to these ideas:
  1. The body uses the background image, fade-bg.jpg.
  2. The president's image is floating.
  3. The president's image has a border and separation from the surrounding text on the left and bottom.
  4. The header image is centered.
  5. The document's font is verdana with sans-serif fallback. The base size is 10pt.
  6. The document as a whole is pushed out from the edges on the left, right and top, with more on the top.
  7. The paragraph "Greeting from ...": the color is #800080 and it has a larger font size.
  8. Extra space has been added around the horizontal rule.
  9. Extra space has been added between the list items.
An (advanced) step:
  1. Use the psuedo-class properties of hyperlinks to create the effects of the navigational hyperlinks at the bottom.

© Robert M. Kline