Class 05: Cascading Style Sheets

Held: Thursday, 4 September 2003

Summary: Today we learn how to add interesting formating to HTML pages through Cascading Style Sheets (or CSS).

Related Pages:

• EBoard.
• A Quick Guide to HTML.
• Less Than Everything You Wanted to Know about Cascading Style Sheets.
• Lab on Cascading Style Sheets.

Assignments

• Begin Homework 1: An Argumentative Web Site (due Tue).
• Read Beginning Scheme (due Fri).

Notes:

• Grinnell's Ag appreciation festival starts today. Be downtown at 5:30ish to see the legendary dancing tractors.

Overview:

• Reflection on HTML Lab.
• Questions and Comments.
• Lab.
• Reflection.

Reflection on the HTML Lab

• What, if anything, did you learn from yesterday's experiments with HTML?
• What did you think about the comments from Bobby?
  • Did those of you who have written HTML before find them an interesting perspective?

About Style Sheets

• As you may recall, in our discussion of formatting languages (particularly HTML), we noted that there is a tension between logical formatting (this is a title) and physical formatting (this is bold, 18pt, centered).
• One technique to satisfy both camps is to use logical formatting, but add a style sheet that describes how to format each logical component (this is a title; titles are bold, 18pt, and centered).
• Why have a separate style sheet?
  • We are encouraged to format logically, we helps information retrieval.
  • Style sheets serve as shorthand. Instead of typing big, bold, 18pt, centered, etc., we can type whatever logical name we've decided upon.
  • Different circumstances can use different style sheets. For example, there is a growing movement to specify different style sheets for onscreen and printed viewing.
    • Can you think of other choices?

Style Sheets for HTML

• The W3C (World Wide Web Consortium) has designed a number of standards for style sheets.
  • The W3C style sheets have many strengths.
  • There's also some evidence of design by committee ... many things can be done in many different ways.
• We'll focus on a simple and standard use of style sheets.
• To tell the Web browser to use a style sheet, add the following to the head of your document.

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

  • Use the URL of your stylesheet for the ellipses.
  • Style sheet names typically end in .css.
• The style sheet contains a number of entries, each of which has
  • A tag name (perhaps extended slightly).
  • An open curly brace
  • A sequence of properties
  • A closing curly brace
• Each property is
  • A property name
  • A colon
  • A value for the property
  • A semicolon
• For example, here's an entry for a level-1 header.

  H1 {
    color: yellow;
    background-color: black;
    border: solid silver;
    border-width: 5pt 5pt 5pt 5pt;
    text-align: right;
    font-family: "Helvetica", "sans-serif";
    font-variant: small-caps;
  }
  

• How do we get this to work with HTML, which has only a limited number of tags, particuarly when we might want many different designs?
  • Each tag can also have a class attribute.
  • In the tag name portion of the style sheet, you can add a period and the name of a class after the tag name.
• For example, in your HTML page you might have

  <p class="warning">...</p>
  

• In the style sheet you could then have

  P.warning {
    color: red;
  }
  

• Two new tags:
  • div ... a big collection (encloses paragraphs and the equivalent).
  • span ... a small sequence (part of a paragraph).

Lab

• Are there any questions or comments?
  • Here's one of mine: Why are they cascading?
• Do The lab.
• Be prepared to describe something interesting you learned.