X21h: Formatting with Internal Stylesheets

Assignment Module X21h

Formatting with Internal Stylesheets

Contents

Overview
Getting Started
Step 1: Put Text in your File
Step 2: Create the Stylesheet

Step 3: Modify and Complete the Text
Step 4: Check and Debug
Submitting the Assignment

Overview

In this exercise, we'll get started using stylesheets as they were intended to be used: a group of styles all together. We'll put the stylesheet in the same file this time, and in the next exercise (X21i) we'll create a separate CSS file.

Getting Started

Save your XHTML template file as x21h.htm, and title the page, "Sarah Strong Stylesheet Sampler" (changing Sarah Strong to your own name). Make sure your name is listed as author.

Step 1: Put Text in your File

Use copy-and-paste to take the text from this module and paste it into the body of your sampler:

<h1>Sarah Strong Stylesheet Sampler</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p>Two men were traveling together, when a <strong>Bear</strong> suddenly met them on their path. One of them climbed up quickly into a <em>tree</em> and concealed himself in the branches. The other, seeing that he must be attacked, fell flat on the ground, and when the <strong>Bear</strong> came up and felt him with his snout, and smelt him all over, he held his breath, and feigned the appearance of death as much as he could. The <strong>Bear</strong> soon left him, for it is said he will not touch a dead body. When he was quite gone, the other Traveler descended from the<em> tree</em>, and jocularly inquired of his friend what it was the <strong>Bear</strong> had whispered in his ear. "He gave me this advice," his companion replied. "Never travel with a friend who deserts you at the approach of danger." </p>

<p>Moral: Misfortune tests the sincerity of friends. </p>

In the paragraph starting with the word "Moral" add a class to the <p> tag called moral.

Step 2: Create the Stylesheet

Create a stylesheet in the <head> area of your page. It should contain the following styles:

element body: color navy, font-family Verdana, Arial, Helvetica, sans-serif
elements h1 - h6: all font-family Georgia, "Times New Roman", serif
elements h1 - h3: centered
elements h4 - h5: right-aligned
element h1: red
element h2: fuchsia
element h3: blue
element h4: green
elements h5 - h6: black
element strong: color olive
element em: color green
class moral: font-weight bolder, color purple
class large-serif: font-size larger;
font-family Garamond, Palatino, "Book Antiqua", serif
class medium-serif: font-size medium;
font-family Garamond, Palatino, "Book Antiqua", serif
class small-serif: font-size smaller;
font-family Garamond, Palatino, "Book Antiqua", serif
class large-sans: font-size large;
font-family "Gill Sans", "Lucida Sans", Arial, sans-serif
class medium-sans: font-size medium;
font-family "Gill Sans", "Lucida Sans", Arial, sans-serif
class small-sans: font-size smaller;
font-family "Gill Sans", "Lucida Sans", Arial, sans-serif

Step 3: Use the Classes

An example of what the page should look like in a browser is available. This is shown in Opera 7.54, reduced to 70% in full-screen mode in order to fit the entire document on one screen, so yours will look bigger, longer, and narrower. However, you should be able to see the colors, sizes, alignment, and overall formatting. Link here to view.

Copy and paste the following text into the body of your x21h.htm file after the end of the first sample:

Alice's Adventures In Wonderland

by Lewis Carroll

The Millennium Fulcrum Edition 3.0

Chapter II

The Pool of Tears

'Curiouser and curiouser!' cried Alice (she was so much surprised, that for the moment she quite forgot how to speak good English); 'now I'm opening out like the largest telescope that ever was! Good-bye, feet!' (for when she looked down at her feet, they seemed to be almost out of sight, they were getting so far off). 'Oh, my poor little feet, I wonder who will put on your shoes and stockings for you now, dears? I'm sure I shan't be able! I shall be a great deal too far off to trouble myself about you: you must manage the best way you can; --but I must be kind to them,' thought Alice, 'or perhaps they won't walk the way I want to go! Let me see: I'll give them a new pair of boots every Christmas.'

And she went on planning to herself how she would manage it. 'They must go by the carrier,' she thought; 'and how funny it'll seem, sending presents to one's own feet! And how odd the directions will look!

Alice's Right Foot, Esq.

Hearthrug,

Near the Fender,

(With Alice's Love).

Oh dear, what nonsense I'm talking!'

Examine the text and mark up it up with appropriate headings and paragraph tags.
Use <div> tags with style attribute to align the sections as shown by the comments.
To each of the tags, add the class indicated by the comment. Here's an example - the first and fifth lines:


<div style="text-align: center">
<h1 class="large-serif">Alice's Adventures In Wonderland</h1>


<h2 class="large-serif">The Pool of Tears</h2></div>

Step 4: Check and Debug

Check your file to make sure the styles come through as required. It will probably be necessary to debug before you put it on your Website.

Submit your file to the W3C XHTML validator http://validator.w3.org/

Debug and correct as necessary.

Submitting the Assignment

When you're done, double-check that the assignment meets the specifications above, and that all links are functional.

Upload your work to your WCC student Website, and send email to the instructor with the URI. Be sure your email meets the formal requirements: name, class, section and exercise (x21h), and that it follows standard business-email practice.

About This Document
Audience	This exercise is for people who are familiar with the principles of internal stylesheets and want to practice using them.
Objectives	On successful completion of this module, you will be able to: Create and properly format an internal stylesheet; Create and demonstrate the use of styles applied to: HTML elements classes pseudo-classes selector lists
Module x21h: Formatting with Internal Stylesheets	This document is part of a modular instruction series in Computer Instruction. For more information, see the overview or the list of modules in this series, X:"XML, XHTML, DHTML, CSS". This document has been used in the following classes: INP 270.
History:	Original: 17 March 2003 Last modification: Monday, 31-Aug-2009 11:48:08 EDT
Copyright	Copyright © 2003, Laurence J. Krieg, Washtenaw Community College Instructors: You may point to this file in your Web-based materials; however, its location may change without notice. Students: You are welcome to make a copy for your personal use. All other uses: Please contact the author, Laurence J. Krieg, for permission: krieg@ieee.org.