ECA 228 Internet/Intranet Design 1

Lab 3


The purpose of this lab is to introduce basics of Cascading Style Sheets. Upon completion of this lab you will be able to apply style to a variety of elements, using an internal style sheet.
LAB 3    

Create a web page. By now you know that you must use the HTML template with all the appropriate information. This document must contain:

  1. One <h1> element
  2. One <h2> element
  3. Three paragraphs
  4. A horizontal rule
  5. At least one image
  6. An unordered list with a second list nested in the first
    1. Like this
    2. And this
    3. And this
  7. A link to another site
  8. A link to your email address
  9. The following background image, size is 100 X 100
    (Right click, Save Picture As ...) :
paw

Content is up to you, but I ask that you be as creative and interesting as possible.

Use an internal style sheet to apply the following style to your document. You must use CSS declarations to apply the style. I encourage you to play around with CSS and experiment with some of the neat things you can do.

  • <h1> tags are red, sans-serif, and centered
  • <h2> tags are blue, sans-serif, and aligned to the left
  • all paragraphs are indented by 2em.
  • the background color of the document is tan, the color of text is black, and the left margin is at 120 px.
  • the background image is tiled down the left side of the page
  • the outer list uses a square as a bullet
  • the inner list uses a circle as a bullet
  • horizontal rules have a width of 75%, and a color of #006699
  • all images have a thin, dashed border, with a color of #006699
  • unvisited links are blue, with no underline
  • visited links are purple, with no underline
  • hovered links are white with a blue background
  • create a class called first_cap which increases the size of the first letter of the first paragraph by 2em. This class applies only to the first paragraph.

If you have any questions, you can email me. If you're looking for an example, take a look at the source code for this page.


For some great information on getting started with CSS, go to CNET Builder.com.

Return to LABS.