Less Than You Needed To Know About Cascading Style Sheets

Summary: We consider the simplest form of Cascading Style Sheets, a mechanism for combining logical and physical markup on the World Wide Web.

Disclaimers: In this document, we will consider a subset of CSS, but a subset appropriate for much of the work you will want to do. In addition, this document focuses primarily on CSS as it supports improved logical markup, rather than its use in physical markup.

Useful References:

• The Level-One CSS Recommendation, available at http://www.w3.org/TR/REC-CSS1.

Contents:

• Background: Logical and Physical Formatting
• Step 1: Classifying Text
• Step 2: Create Styles
• Step 3: Step 3: Insert Style Guidelines
• What If No Tag Applies?
• Why Cascading?
• Common Attributes

Background: Logical and Physical Formatting

As you may recall from previous discussions, many markup languages present a tension between logical formatting, which describes the role text plays (e.g., this is a section title) and physical formatting, which describes the physical appearance of text (e.g., this text is bold, 18pt Times Roman, centered with a 1 cm. margin around it). HTML originally handled this conflict by providing a few logical tags and a few physical tags, thereby satisfying no one.

As the Web evolved, authors found it useful to provide more logical information (e.g., for search engines) and designers wanted more control over the appearance of text. The solution that the Web community devised was Cascading Style Sheets, or just CSS.

CSS provides a mechanism for combining logical markup along with specifications for the appearance of your logically-marked text. To use CSS, you need only make a few changes to your standard HTML documents.

Step 1: Classifying Text

You begin to incorporate CSS by adding a class attribute to any tags that you have used. For example, if you have decided to make a piece of text italic to indicate it is a book title, you might use <i class="booktitle"> rather than just <i>. Similarly, if you are writing a play, you might classify each paragraph by the speaker, with <p class="Othello">.

Note that in order to property select such attributes, you must think about the kinds of text that appear in your document. While you will start by post-classifying your documents, in the future you should plan classifications before you start to write.

Step 2: Create Styles

Next, you create style guidelines for each attributed tag. For example, I might decide that book titles should be underlined and boldfaced. You express these decisions in a formal notation.

First, you write the name of the tag, a period, and the name of the class. For example, you might write i.booktitle. Second, you write an open brace. Third, you write the individual characteristics of the classified tag. Finally, you write a close brace.

Each individual characteristic has the name of the characteristic (e.g., color, margin-left, font-family), a colon, a value for the color (e.g., green, 10%, "Helvetica"), and a semicolon.

Here's an example for book titles:

i.booktitle {
  font-weight: bold;
  font-style: normal;
  text-decoration: underline;
}

Step 3: Step 3: Insert Style Guidelines

Finally, you must insert these stylistic guidelines into your document. There are a number of ways for inserting the guidelines. The simplest is to put the guidelines in the head of your document. In this case, you must surround them by the tags < style type="text/css"> and </style>

However, many recommend that you not use that technique. Why? First, it often makes sense to share style information between documents. It is inefficient to replicate style information in many documents. Second, some browsers do not understand style sheets (or, more precisely, they are not programmed to handle style sheets). Such browsers may display the contents of the style sheet on the screen.

The preferred mechanism for including stylistic information is to create a separate file (a style sheet) and link to it from your document. The form of a link tag is as follows:

<link rel="stylesheet" 
      type="text/css" 
      href="url">

What If No Tag Applies?

At times, you'll find that you want to classify a bunch of text, but there's no tag that you can naturally apply to that text. For example, you might have a set of stage directions that occupy multiple paragraphs or you might find that you have a few words that you'd like to indicate are an invented word.

To support such special circumstances, CSS adds two new tags to HTML, span and div. You can use a span tag to mark a short section of text, typically within a paragraph, section title, or list item. For example, you might write <span class="invented">. You can use a div tag to mark longer sections of text. In the case of the stage directions, you might prefix the paragraphs with <div class="directions"> and suffix the paragraphs with </directions>.

Why Cascading?

Many people ask why Cascading Style Sheets are considered cascading. Read the documentation for more information.

Common Attributes

Here are a few sample categories. Read the documentation for more information.

color

red, green, blue, yellow, etc.

rgb(x,y,z) where x, y, and z are all numbers between 0 and 255 (the RGB additive model)

font-weight

normal, bold, bolder, lighter

font-variant

normal, small-caps

font-style

normal, italic, oblique

font-size

xx-small, x-small, small, medium, large, x-large, xx-large

##pt

text-decoration

none, underline, overline, line-through, blink