Using and Building Styles

Goal: In this laboratory, you will investigate the effects of cascading style sheets. Along the way, you will consider when one might want to define new logical tags and eventually build your own style sheets.

Note: We've left some space after each question for you to enter your answers. You need not write down your answers except for the few questions that specifically say ``Enter your answer here''.

Basics

In the first part of this laboratory, we will consider ways to affect the appearance of a sample document which may be found on the Web at http://www.math.grin.edu/~rebelsky/Courses/Tutorial/99F/Handouts/syntax.html. Midway through the lab, you will need to make your own copy of the sample document.

Customizing the Browser's Font

As you may know, Netscape and other browsers allow you as reader to partially customize the appearance of other pages on the Web. First, bring up the sample document.

Next, select ``Preferences'' from the ``Edit'' menu. If you see ``Fonts'' at the left, click on it with the left mouse button. If you don't see ``Fonts'' on the left, click on the triangle to the left of ``Appearance'' and then click on ``Fonts'' when it appears. Set the variable-width font to ``Times (Adobe)'' 18 point. Click OK. What happens to the sample document?

Switch the font to Helvetica 12pt. What happens to the sample document?

Switch the font to Times 12pt (or whatever you'd prefer as a default). You've now explored the primary control

Adding a Style Sheet

I've set up a number of sample style sheets for use with this document. Make your own copy of the sample document by clicking and holding on the link with the right mouse button and then selecting ``Save Link As ...''. You may also choose to load the page directly from http://www.math.grin.edu/~rebelsky/Courses/Tutorial/99F/Handouts/syntax.html and then use ``Save As ...'' from the ``File Menu''.

Open your copy using dtpad. Add the following lines to the head of the document (right before the tag that reads ``</HEAD>''.

<LINK REL="stylesheet" TYPE="text/css"
      HREF="http://www.math.grin.edu/~rebelsky/Styles/dobbs.plain.css">

Save the modified file and then load it using Netscape. Ask me if you don't remember how to load a local file using Netscape.

What effect does the style sheet have on the document?

Using the preferences window (which you learned how to access earlier), set the font to times 18pt. What effect does the font change have?

In the font preferences window click the button next to ``Use my default fonts''. What effect does this have? Is that what you expected?

Restore your settings (select your preferred font; check ``Use document's fonts''.

Considering Components

There are many parts of this long document that play many different logical roles. Identify about ten different roles within the document. Record them here.

How might you choose to represent those roles visually?

Other Styles

You've selected one style sheet for this document. However, it is possible to create other style sheets. I've created a few for you to experiment with. Reopen the document with dtpad and change the style sheet to each of the following. Consider the changes that each has.

• http://www.math.grin.edu/~rebelsky/Styles/dobbs.plain.css
• http://www.math.grin.edu/~rebelsky/Styles/dobbs.original.css
• http://www.math.grin.edu/~rebelsky/Styles/dobbs.beta.css
• http://www.math.grin.edu/~rebelsky/Styles/dobbs.gamma.css
• http://www.math.grin.edu/~rebelsky/Styles/dobbs.alpha.css

You may also want to see which styles allow you to change the font from the preferences window.

Which, if any of the styles do you prefer?

Your Own Styles

You are now ready to build your own style file. For convenience, you'll build a style file for the ``Syntax: Models'' document. That document uses the following ``logical'' tags.

• P for paragraphs
• P.annotation for the introductory note that I added at the beginning.
• P.author for the author of the document.
• H1 for the displayed title of the document.
• H2 for the section headings
• H3 for the subsection headings (primarily ``Example'')
• UL for the bulleted lists
• UL.contents for the table of contents at the start of the document
• OL for some of the numbered lists
• LI for items in those lists
• STRONG for strongly emphasized text
• STRONG.example for example sentences
• STRONG.partofspeech for parts of speech (e.g., ``noun'')
• STRONG.error for phrases describing grammatical errors
• EM for emphasized text
• EM.word for words that are treated as words
• TD for cells in tables (used for the multi-column words).

Using dtpad, create an empty file called dobbs.css. Update your HTML file to use that style file. (If you're not sure how to do this step, ask one of your classmates or SamR for help.) What happens when you reload the HTML file in Netscape?

First, we'll update all the paragraphs (or nearly all the paragraphs) to use green text. Add the following lines to dobbs.css

P {
  color: green;
}

Save the modified dobbs.css. Then force-reload the page in Navigator. (To force-reload, hold down the shift key before you click on the ``Reload'' button.) What happens? What does this suggest to you?

It seems that we should highlight the note at the top of the page. Add the following lines to dobbs.css.

P.annotation {
  color: red;
  background-color: white;
  margin-left: 1in;
  margin-right: 0in;
  border: solid;
  border-color: yellow;
  font-size: small;
  text-align: right;
}

What do you expect each line to have? You may want to put your notes next to each of the lines.

To confirm your answer, save the file, and then force-reload. You may also want to try variations of each of those parts.

Next, we'll center the document's top-level heading (the displayed title). Add the following lines to dobbs.css, save the file, and then force-reload.

H1 {
  font-family: Helvetica;
  text-align: center;
}

So far, we've only affected things at the block level (that is, whole paragraphs or things like paragraphs). How might we change things within paragraphs? Remember that we've been using variants of STRONG and EM.

Perhaps we want strongly emphasized text to be larger. We might write

STRONG {
  font-size: 120%;
}

Pick your own way of representing strongly emphasized text. You may wish to record the style here.

Divisions

What if we want to affect multiple paragraphs? For example, suppose we wanted the first section (about nouns) to have a white background. HTML supports a DIV (division) tag that does nothing but allow you to apply styles to multiple sections grouped together. We might write the following style.

DIV.nouns {
  background: white;
  border: ridge;
}

How do we then apply it to that section? We put

<DIV class="nouns">

before the section and

</DIV>

after the section.

Try adding the style and adding the two tags.

Have Fun

If you have time left, see how creative you can be with this document.