Workshop 1 Exercise 1

Produce a page that looks exactly like this one. You should use a cascading style sheet stored in a separate file. Note that the main heading is centred and red. The font family used throughout this page is Verdana. The background of the page is #EEEEEE. This is an ordinary paragraph. The color of this text is blue.

You can use the lecture notes from the first lecture to help you. These are available online at http://www.titanmusic.com/teaching/cis336-2006-7.html.

You can also use the W3Schools Tutorials on HTML and CSS at http://www.w3schools.com.

You can find a list of all CSS 2.1 properties at http://www.culturedcode.com/css/reference.html.

  1. This is the first item in an ordered list. Note that it is italic, bold and red.
  2. This is the second item in an ordered list.
  3. This is <em> text inside a list item. Note that it is 15px in size and green. (It is also still bold and italic.)

This is <strong> text with the class attribute set to the value foo. Its color is #666666. The word spacing is set to 10mm. This is <strong> text with no class attribute value set.

This is a paragraph inside a div element whose class attribute is set to the value margins5. Its margins on all sides are set to 5%.

Here is the second paragraph inside the div element. Note that a div element can contain more than one paragraph.

We are still inside the div element whose class is margins5. Now we're using the <span> tag with its class attribute set to bar. This text uses an oblique, monospace font with color set to #0099CC and size set to large.

Now for some preformatted text:

for (int i=0; i < 10; i++) {
  if (i%2==0)
    System.out.println(i);
  else
    System.out.println(-i);
}