Lab 1: CSS

For this lab, you'll modify an existing set of webpages to use CSS. You should use a single external CSS stylesheet to do this. (Do NOT embed the CSS within the pages.) You must do this by hand - no generated code, please.

Due: Tuesday Feb 6, at the start of class. 30 points

To turn in: place a copy of your site underneath your home page at: http://www.cs.usfca.edu/(yourname)/cs682/lab1/

You'll be modifying pages for an imaginary class to make them less icky-looking. The source pages are here in a tarball. (use 'tar xvzf pages.tgz' to unpack them after downloading)

Note: there are places in this where I'm specific about what I want you to do, and places where I am not. In those non-specific places, I encourage you to be creative. I'm not as interested in you doing 'the right thing' as I am in you exploring CSS for yourselves.

You should do this following for this lab:

  1. (3 points) Replace all formatting tags, such as b, center, font, or i, with equivalent CSS.
  2. (3 points) Use pseudo-classes to give anchors some dynamic behavior - change the color of the link when the mouse hovers over it.
  3. (3 points) Incorporate at least two different font styles and colors in a sensible way. (i.e. don't just randomly color words - make it look nice.)
  4. (6 points) The course info (instructor, office, phone, email, office hours, TA, time, place) should be placed in a separate box with a different font, background, and border from the rest of the page.
  5. (5 points) Give the 'assignments' list a distinct background and bullet style.
  6. (5 points) Remove the table from resource.html and produce a three-column layout using only CSS.
  7. (5 points) That menu's pretty darn ugly. Add a (prettier) menu to each page using CSS at either the side or top-left corner, allowing the user to navigate between pages.

Last modified: Mon Jan 30 22:51:07 PST 2006