Lab 13: Style Sheets

Step 1: Setup

[1.1] Download the directory Lab13 from introShare on Crow. This folder contains all the files you will need to complete this lab.

[1.2] Open the file before.htm in both a text editor and Microsoft Internet Explorer 5.0 or later (at this writing, only MSIE 5 reliably supports style sheets in both Windows and Mac environments). Look at both the display and the markup. You should see a rather plain Web page, 500 pixels wide, with one heading and three paragraphs of text. Now point your browser to after.htm in the same directory. Don't peek at the markup yet. This is the page you'll be building.

[1.3] Return to your text editor and save the file before.htm as working.htm. Open working.htm in your browser.

Step 2: Style the main text

[2.1] Find the first <p> tag in the markup for working.htm. Immediately before this tag, enter the new tag <DIV CLASS="main">. Now find the last </p> tag in the document. Right after this tag, type </DIV>. You've now created a block-level division containing the three main paragraphs or body text of your page.

[2.2] Now we'll style that main division. Scroll up until you see the head portion of your markup. Within the head container, enter this new container:

    <style type="text/css">
    </style>

This container is an internal style sheet. Within the style sheet, enter the following line (called a style sheet rule):

    div.main { font: 10pt/14pt Courier }

Type the rule exactly as you see it here. Save working.htm, switch to your browser, and refresh. The text in your three main paragraphs should now be set in Courier. If it isn't, re-check your typing.

[2.3] Once you get the font change to work, replace the "div.main" rule with the following:

    div.main { color: #993300; font: 10pt/14pt 
	Verdana, Helvetica; letter-spacing: 1 }

Now have a look at your main text. It should appear in a dark red color, in either the Verdana or Helvetica font. The letter spacing should be noticeably wider than it was before. You can experiment with all the parameters in the rule above. See what strange changes you can make.

Step 3: Style the H1 heading

[3.1] Within the internal stylesheet container you created in Step 2.2, enter a new style sheet rule:

    h1 { color: #000099; }

The top-level heading should immediately come up in blue. Following the pattern of Step 2.3, set the font of your H1 heading to 22-point Lucida Sans Unicode. When you get this to work, add a semicolon to the last item in the rule and then add a new item, "font-weight: 700".

[3.2] Check your work. Your heading should appear in blue, Lucida Sans Unicode, and bold. Note that you did not have to create any special DIV for this effect: style sheets can be used to change the appearance of ordinary HTML elements such as headings.

Step 4: Style the "scan360" title string

[4.1] In this step we will apply styling to a special string that appears several times in the text: the title of the publication, "scan360." First find all three occurrences of this string in the markup (two are in the second paragraph and the third is at the beginning of the final paragraph). Surround each occurrence with the container <SPAN></SPAN>. In each of the initial SPAN tags, add the attribute CLASS="scan360".

[4.2] In the internal style sheet (the STYLE container), add a new rule as follows:

    span.scan360 { font: 10pt Lucida Sans Unicode; 
    font-weight: 700; color: #000099; 
    background-color: #FFFFCC }

As you'll see when you save and reload, this rule creates a pale yellow highlight for the title, which is set off in its own font and color.

Step 5: Add the logo strip

[5.1] The finished version of this page contains a vertical element at the right of the text which repeats the scan360 logo several times. This element can't be part of the page background because it doesn't tile all the way down the page. It could be a single graphic sitting in the layout table, but it's actually something more efficient: a DIV in which the single scan360 logo (rotated 90 degrees counterclockwise) is locally tiled in the vertical axis. This kind of effect can only be achieved with style sheets. Begin by setting up an empty DIV container <DIV></DIV> just before the initial <TABLE> tag in the markup.

[5.2] Now add the items you see below to the initial <DIV> tag:

    <DIV style="background-image: url(vertical_logo.jpg); 
    background-repeat: repeat-y; height: 86%; width: 50;
    position: absolute; top: 30; left: 530">

You should see the logo strip to the right of your main text. This is your first look at absolute positioning, a very powerful feature of style sheets and DHTML which at the moment is supported only by Internet Explorer. We'll use it again when we come to DHTML layering.

Step 6: Refinements

I've left a few finishing touches out of this quick walk-though. See if you can set up the horizontal rule that appears in the finished version under the H1 heading, and position it just so. The answers are in the markup for after.htm.