Demonstrating Cascading Style Sheets (CSS)

Style sheets are a wonderful way to:

  1. Give an HTML document a distinctive "look and feel."
  2. Enforce a common "look and feel" across many HTML documents.
  3. Separate the logical structure and contents of a document (in the HTML file) from specifications of its appearance (in the style sheet (CSS)).

The mock newsletters No Style Times, Style Times, and High Style Times demonstrate the use of style sheets to "dress up" an HTML file. Here are the publications:

No Style Times

No Style Times is an HTML 3.2 document that presents a simple newsletter with a minimum of attributes set. Its purpose is to demonstrate how this content would look without any style sheets. There is no style sheet in use here, hence the name.

Style Times

Style Times uses the same content as the No Style Times, but adds a style sheet, styletimes.css. (I copied the contents of styletimes.css into a file styletimes.css.txt so that your browser can read it, as some browsers have trouble displaying a css file directly.)

The Style Times HTML document includes this line in its HEAD:

<LINK rel="stylesheet" href="styletimes.css" type="text/css">

This use of a style sheet LINK makes it an HTML 4.01 document. Otherwise, the rest of the contents do not differ at all from the No Style Times.

I made styletimes.css to alter the appearance of HTML elements. I added no named classes, nor did I add any style that would require me to change the content as it was in the No Style Times.

You should look at this example and realize:

High Style Times

High Style Times starts with the same content as the Style Times, but adds another style sheet, highstyletimes.css. Using this style sheet requires some additional elements and attributes to be added to the content.

High Style Times thus has these two style sheet links in its HEAD:

<LINK rel="stylesheet" href="styletimes.css" type="text/css">
<LINK rel="stylesheet" href="highstyletimes.css" type="text/css">

I made highstyletimes.css to introduce three named classes:

TD.leadstory
This is meant to identify the TD element in which the lead story (the most important story as judged by the newsletter editor) is located. In the style sheet, I made this lead story column wider than the others, to give more emphasis to the contents.
SPAN.dateline
This encloses the city of origin and date in which the story was filed. In the style sheet, I change the color of this text and set it in italics.
P.callout
This encloses text in the document that the editor judges as important. That is, text that should be set off from the main body of the story. This is commonly done in publications to break up long columns of text and give short blurbs to draw the reader into the story. In the style sheet, I make this callout a colored box that floats to the left of the main body of text.

In order to put these to use, I had to put elements using these named classes around content.

At the start of the story about the clock I have this:

MILWAUKEE (November 27) A clock in the ...

which I change to this:

<SPAN class="dateline">MILWAUKEE (November 27)</SPAN> A clock in the ...

The P.callout class is even easier to use. I simply have to add the attribute class="callout" to the P element of interest. So I start with this:

<P> "It is part of the pace of life," patron Candy De La Rosa said, "for time to move, to wait for no one." </P>

which I just change to this:

<P class="callout"> "It is part of the pace of life," patron Candy De La Rosa said, "for time to move, to wait for no one." </P>

Similarly, the lead story column is just as easy. I start with this:

<TD> <H2> Fall Web colors include brown </H2>

to this:

<TD class="leadstory"> <H2> Fall Web colors include brown </H2>

It is really that easy. Every day, I thank God for style sheets.

I also think Dave Raggett should win at least one Nobel Prize for Tidy.

search Search · star Market
2023-06-19 · John December · Terms © johndecember.com