The address for this web page is:   http://fishcaro.crosswinds.net/day_45_ext_ssht_exer.htm
On to the next lesson!
Back to the COURSE SYLLABUS

45. EXTERNAL STYLE SHEET EXERCISE

This exercise will allow you to practice all your style sheet skills, and display your

C R E A T I V I T Y
as well! You'll be creating a basic HTML document, and applying different styles (of your own design) to it by linking to an external style sheet.


STEP 1

First, create a basic HTML document with a variety of headings and textual elements. Save this document as basic.htm.

Click here to see the document that you need to create:
(It will appear in a new browser window.)
(Feel free to "cheat"! VIEW the source code for this basic document, copy it, paste it into your favorite text editor, and save it as basic.htm.)


STEP 2

Next you will create three different EXTERNAL STYLE SHEETS that reflect three different moods:
EVERYONE must create a "HAPPY" style sheet.
For the remaining two style sheets, you may choose from the following list, or select your own (different) mood:
Save each external style sheet with the following type of name (and be sure to use the "css" extension):
stylesheet_happy.css
Each external style sheet contains ONLY style sheet information. It does NOT contain ANY HTML tags. In particular, it does NOT contain <HTML>, <HEAD>, or <BODY> tags. Here's what the source code for a typical external style sheet would look like:

H1 {color: "red"}
H2 (color: "blue"}
H3 {color: "green"}

(Lots more, of course!)

STEP 3

Next, make three copies of your "basic.htm" document, with the following type of name:
basic_happy.htm
In the HEAD section of  basic_happy.htm , put the following code:

<HEAD>
<LINK REL="STYLESHEET" HREF="stylesheet_happy.css" TYPE="text/css">
</HEAD>

This will "load in" the appropriate style information. The "REL" attribute defines the linked document's relation to the current document—a "stylesheet". The "HREF" attribute gives the URL to the file containing the style sheet information.

STEP 4

SAMPLE "MOOD" SHEETS!

Here are some of the "mood sheets" created by students from Miss Hall's School. Each will open in a "pop-up" window, so you can compare the different moods.

On to the next lesson!
Back to the COURSE SYLLABUS
© 2001 Carol J.V. Fisher    All Rights Reserved