Fundamentals of Computer Science I (CS151 2003F)

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:

Contents:

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

 

History

Tuesday, 2 September 2003 [Samuel A. Rebelsky]

 

Disclaimer: I usually create these pages on the fly, which means that I rarely proofread them and they may contain bad grammar and incorrect details. It also means that I tend to update them regularly (see the history for more details). Feel free to contact me with any suggestions for changes.

This document was generated by Siteweaver on Tue Dec 9 14:00:10 2003.
The source to the document was last modified on Tue Sep 2 13:08:06 2003.
This document may be found at http://www.cs.grinnell.edu/~rebelsky/Courses/CS151/2003F/Readings/css.html.

You may wish to validate this document's HTML ; Valid CSS! ; Check with Bobby

Samuel A. Rebelsky, rebelsky@grinnell.edu