Cascading Style Sheet Tutorial

Introduction

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. This document is a "low rent" tutorial on Cascading Style Sheets (CSS) and contains just enough information to get you started. If you want the Real Thing™ then you want the W3C's CSS Web page. The original specification was CSS 1.0 (aka CSS1), but as of 1999 there is a new version called CSS 2.0.

An Example

Here is a simple style sheet such as might be found in the <HEAD> part of an HTML document: 

<STYLE TYPE="text/css"> <!--
	BODY, TH, TD {
		font-family: Verdana, sans-serif; 
		font-size: 10pt;
		}
	A:hover { color: red; }
	.in { margin-left: 2em; }
	// -->
</STYLE>

The <STYLE> tag identifies this as a CSS type style (there could be others), and the HTML comment right after it forces browsers that don't recognize CSS to ignore everything up to the end of the line before the ending </STYLE> tag.

Then general form of a style sheet is the name of one or more tags or "classes" (more on this later) followed by the style specification enclosed within squigley brackets. The style specifications, IMHO, are the tough part to remember — you have to spell them exactly right, and remember what the valid values are.

"font-family", for instance, is how you pick a font. In the example above I want the "Verdana" font, but if it isn't availabe, then I'd like any "sans-serif" font. Sans-serif is a generic fontname and leaves the browser free to pick the specific font it wants from that family. The "BODY, TH, TD" part means I want this style to apply to all tags which inherit from BODY. I included TH and TD specifically because Netscape's browser doesn't apply the style properly (it doesn't let TH and TD to inherit from BODY), and I want the style to work inside TABLEs.

I used "font-size" to specify the size of characters I want. 10 point corresponds to "SIZE=2" in the <FONT> tag. I could also have specified the size using percentages and a number of other measures. I prefer using "points", however, as it is the same measure that Windows programs use to specify font size.

The next line, with the "A:hover", is really a CSS2 feature but it's really cool and IE 4 supports it. It means that for ANCHOR links, when the cursor hovers over the link, apply the given style. In this case, it turns the link red. CSS recognizes some basic colors by name, and otherwise uses the same RGB values that HTML does. e.g. "color: #FF0000;" would have done the same thing as what I wrote.

The last line of my style above creates a "class" called "in", with a style which includes an indent from the left margin of the width of two em characters (roughly the width of two letter W's). It is a class because it starts with a dot. That means I can apply it to most other tags via what is called an inline style. For example, to have a paragraph indented as desired, I would code "<P CLASS=in>" in my HTML source. I could apply the class to other tags as well, such as a <TABLE>.

The "Cascading" Part

The "cascading" part is a bit complicated. See the official specification if you want the fine details, but let me warn you it is complicated. In CSS1 in general, the Web page author's style is given the highest weight, followed by the user's style, and finally, the browser's style. In CSS2 I hear they give the user's style preference over the author's (which I think is a mistake).

For the purposes of this tutorial, let's say there are six ways to specify a style.

  1. Your browser has a default, built-in style (possibly not a 'real' style sheet). This is what you get if there are no style sheets involved. IE and Netscape both pick Times New Roman as the default font.

  2. You can set a 'reader', or 'user', style via your browser (at least you can with IE 4.0 or later, via the Accessibility options). This allows you to override the browser's default style. Most people don't change this (perhaps because they don't know they can).

  3. Include a style via a <LINK>: tag. For example:
    <LINK REL=Stylesheet HREF="thestyle.css">
    This is the method of choice if you plan to re-use the style sheet, such as you would if you were doing a dozen Web pages in the same style. In a CSS file, you don't put the <STYLE> tag, nor do you need the comment trick — after all, it isn't an HTML document...

  4. Include a style via a <STYLE>: tag, as in "An Example" shown above. This is the means I use when I want a unique style for a specific Web pages.

  5. Include a style via an "@import" with a <STYLE> tag. For example:
    @import "http://www.somewhere.com/styles/radical.css"
    Use this method if you want to combine pieces of style into a particular <STYLE> tag.

  6. Include an inline style via a "STYLE=" attribute within a tag. For example:
    <P STYLE="{ font-family: Verdana; color: #006699; }">
    I use this method when I want just a single part of a Web document (such as just one paragraph) to have a particular style.

How to...

Change font I generally use the following specifications to change font, font size, color, etc. You can do it with a single "font" specifier but I like to be explicit:
    font-family:
    font-size:
    font-weight:
    color:
    text-decoration:
The font-family takes font names, separated by commas. You don't need quotes unless the font name has spaces in it, like "Comic Sans MS". It is suggested to always end with a generic font family, like sans-serif or Heletica.
Change margins I generally use the following specifications to...

http://webreview.com/wr/pub/Style_Sheets

Last updated: 26-Feb-1999
marcl@micapeak.com