CSCI 100 - Homework 4

Cascading Style Sheets

Due by midnight, Thursday 02 Nov 2006

Making Folders

Go to your www/csci100 directory. Make a folder called hw04. Inside it create 3 subfolders, pages, images, and CSS.

You should organize your files as follows:

Note: you'll be creating your index page at www/csci100/hw04/index.html, not inside the "pages" directory. You could create a skeleton of that now if you want.

Overview

In this project you will be making three CSS style sheets and one HTML page that will be rendering using each of the various style sheets. The styles you will be creating are the following:

Making pages

I've put template HTML and XHTML files on the web.

Feel free to use them as starting points.

You will be creating an (X)HTML page to demonstrate your CSS files, which you will copy and only change the CSS file linked to in order to demonstrate the other CSS file. light.html will be linked to light.css and dark.html should link to dark.css. Both should include a link that contains a link to print.css with the attribute media="print".

You will need to demonstrate the following (note: "some" can be just one, and you may combine more than one requirement in an element):

  1. Try to set all colors - nothing should be the default.
  2. Create different colors for <em> and <strong> elements (foreground and/or background)
  3. Some paragraphs that are left aligned, some that are fully justified
  4. 2 background images (either in a paragraph, header, full page, etc.)
  5. 2 different border styles
  6. 2 different header alignments (left, right, or center) -- can be at different levels
  7. A bulleted list that has a different background color from the rest of the page
  8. At least one instance of changing the font (either for an element or the page)
  9. An example of the box-model showing content, padding, border, and margin for an element
  10. Change the appearance of links for visited, unvisited, and hovering
  11. One use of :hover for a non-link such as paragraph, list, or header (make it obvious)

It might help grading if you label the bits. :-)

Making the second page

Assuming you first created light.html, then you can just copy it:

cp light.html dark.html

and all you should need to change is the <link> line in the <head>

Making print.css

Finally, you should create a final CSS called print.css that turns all the colors back to being black text on a white background for printing. You should link it in after your light/dark css using something similar to the following line: 

<link rel="stylesheet" type="text/css" href="../CSS/print.css" media="print">

Be sure that it is un-doing your colorations (I suggest using "Print Preview" for this).

Index page

Create a page in the top level hw04 directory called index.html. Have it include links to your light.html and dark.html pages as well as your name and the honor code affirmation.

Verify pages

Verify your pages and CSS files using the online validators:

Resolve any problems that are discovered.

handin

Upload your hw04 folder to your CS account and verify that your pages and images can be viewed online. You will also need to electronically submit your files to me as you should have done in the last assignment.

To do that, there are 2 mechanisms you can use:

  1. Command line tool: if you log into occs remotely, or one of the lab machines, you can just submit all the files that you uploaded.

    To do so, you should perform the following commands ('#' and beyond are comments):

    • cd www/csci100    # go to where the directory you uploaded was
    • handin -c cs100 -a 4 hw04    # class, assign no., directory to submit

  2. Web interface: go to www.cs.oberlin.edu / handin and fill out the form there with your CS username and follow the prompts.