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:

SAD
ANGRY
PEACEFUL
EXCITED
STRESSED
LOVING
MISCHIEVOUS

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

This exercise is worth 30 points and is due on FRIDAY, February 14 (10 points for each of the three moods.) On that day, each girl will display each of her "MOODS" on a computer screen. The class will vote on a winner for the "HAPPY" mood. The class will also vote on a winner for an overall "BEST MOOD". Each winner will receive a home-baked goodie prize from Dr. Fisher (which CANNOT be eaten in the Computer Lab)!
You must pass in to me HARD-COPY PRINT-OUTs of each of your three style sheets, and the result of applying each style sheet to your basic HTML document. (I know that colors etc. won't show up on the hard-copy; I'll be grading the "aesthetic" sense of each while the class is voting on the winners.)

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.