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:
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
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:
- (3 points) Replace all formatting tags, such as b, center, font,
or i, with equivalent CSS.
- (3 points) Use pseudo-classes to give anchors some dynamic behavior -
change the color of the link when the mouse hovers over it.
- (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.)
- (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 points) Give the 'assignments' list a distinct background and
- (5 points) Remove the table from resource.html and produce a
three-column layout using only CSS.
- (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