CSc 302 Assignment 2
Mississippi College
Computer Science
Dr. Bennet

Lists and Links

Assigned
Due

Sep 15
50 pts
Sep 29

This assignment is to provide some practice with CSS. The task is to provide style instructions to improve the appearance of an existing page, without changing the page.

  1. Download and unpack the starting files into some working directory or folder.
    1. That link is a zip file, so your browser will probably bring up a file archive program.
    2. Choose “unpack all” and put the files into a folder on the desktop, in documents, or wherever you find convenient.
  2. The working folder will include stgiles.html. Open it in your browser.
  3. The stgiles.html file contains a link for an external style sheet called stg.css, but no stg.css is provided. The assignment is to make one.
  4. Use a text editor (Notepad or better) to write stg.css so that the page looks more attractive. (There is much room for improvement.)
  5. You will want to create the file and add directives. Each time you make a change to the css file, you should reload your browser to see the effects.

Do not change the html page; only make changes to the css. This places some limits on what you can do, but part of the point is get you working with CSS, and seeing what it can do.

What sort of style changes might you consider?
  • The document is divided into two main sections, a div.intro, which contains the headers and first image, and div.cont which contains the balance of the body. You may want to apply different styles to these.
  • Change font family style or color, particularly for the headers.
  • Add background colors, perhaps different for intro and cont.
  • Add borders. You might use them like borders, to put a box around the while page, or set a border on a single side as a divider or to set off a section
  • You will probably want to make the images smaller, and perhaps float them so the text flows around.
  • You might want to set the height of the intro area, and use margins or positioning to arrange the headers within it.
  • You might want to change centering, indenting, or justify margins.
  • Most anything else you can do with CSS that you think looks nice.

When you're ready, copy all the files in the working directory to Sandbox (stgiles.html, stg.css, and the three image files), then send the URL that points to stgiles.html here.