CSS Exercise

In this exercise we will explore the power of CSS by changing the look of a plain XHTML without modifying any of its XHTML, only by using a style sheet. The exercise is inspired by css zen garden, but we will keep it simpler and build it step by step.

You will need to download css-exercise.html to your public_html. Open that file in your editor and you will see that it uses a style sheet file called mystyle.css. You will write that file. You cannot modify css-exercise.html, only add information to your mystyle.css in order to achieve the following effects:

1. Lets start by giving it some color. Change the background color of the page to a nice off-white and change all the headers to a contrasting color. You can also use a background image if you feel inspired.
2. Make the quickSummary a separate box on the left such that all the rest of the text flows around it.
3. The contents of the quickSummary should stand out from the rest of the text. Change the text in there to italics and use a different font. Also, change the color to a really dark color and the text color to a light color (so we can read it!).
4. The preamble, supportingText, and participation are still boring. Change their titles to a sans-serif font. Change the background of the titles to a different color so the titles stand out. Spread out the letters in the titles.
5. The previous three elements should be separated from each other, and their headers should have some extra whitespace on top of them, but not on the bottom.
6. The footer should not draw attention to itself. Make the text small, and make it flush with the right margin. Also, draw a horizontal line before the text.
7. The linklist is really a menu that should appear at the top-left of the page, move it there. Change its style so it is clearly recognized as a menu and the hyperlinks look like buttons that change color when the user hovers over them.
8. Finish up your design with whatever flourishes you need to make the page look nice. The final page must look nice.