Due Tuesday 2/6 at start of class.
30 points
This lab will give you the opportunity to gain some experience working with CSS. You should create an external CSS style sheet to provide the functionality below and link to it in each of the pages you created for lab 0. Please use an external stylesheet rather than embedding the CSS in each page.
As with Lab 0, you must code the CSS by hand. Please do not use Dreamweaver, iWeb, Front Page, or other WYSIWYG web design tools.
As with Lab 0, your CSS must successfully validate in order to receive any credit for this assignment. I will use the W3C validator to check your code. (The XHTML must still validate as well.)
Please note that the list of requirements below should be taken as a minimum. I would strongly encourage you to explore other aspects of CSS, and use this as an opportunity to experiment. In addition, if you would like to use this as an opportunity to also add Javascript to your pages, that's great.
These requirements are fairly general, and I encourage you satisfy them in whatever way you find most interesting, with the following rules:
- All CSS code must successfully validate. (see above)
- Your code must not contain anything that depends on a particular browser or OS to work (for example, no ActiveX controls, or IE extensions).
- Your code should be able to tolerate browser windows of any size, as well as resizing. Do not assume that your users will have their browser window 800px wide.
- (3 points) Use CSS to control the color and font for the main text in each of your pages. (For example, make it Helvetica and red, or Arial and purple.) Use at least two different colors and fonts in your site.
- (5 points) Add dynamic behavior using pseudo-classes to your page to change the appearance of links when they have been visited or are hovered over.
- (3 points) Use 'div' and classes to provide different looks for different areas of your website.
- (4 points) Use CSS to control the background of your site. You may either set a color, or else tile an image. Be careful that your fonts are still readable.
- (4 points) Ensure that all formatting tags, such as b, i, center, and font, are replaced with CSS controls.
- (6 points) Use CSS to control the placement of your navigation menu. Please be aware of the requirement that the user must be allowed to resize the window and still use your page. (I'd recommend trying to use CSS to do all the layout on your page, as opposed to using tables or frames.)
- (5 points) style. I will grade this based on both how your page looks and also the elegance of your CSS. Please note that I'm much more interested in a fairly nice design you do yourself that a really slick design that's heavily borrowed from CSS Vault.