Introduction to Cascading Style Sheets

Description

<Related pages>
Answer W3C: Style sheets section.
Answer W3C: CSS recommendations level 1 and level 2.
Answer W3C: The CSS1 Test Suite
Answer W3C: CSS level 2 validator
Answer W3C Core Styles, a collection of ready to use style sheets.
HTML was set up to be a language to describe the different elements which make up the contents of a page, and not to specify the layout of these elements. For example, if you use a <H1> element to specify a level 1 header, you should do that because it is the most important heading in the document, not because you want to show the text in a larger font, as most browsers do.

Perhaps someone writes a browser which creates an outline of a page by showing an indented table of all headers, where the indentation level depends on the level of the header. A document in which headers are used only because they show up with a larger font will not create a correct outline for such a browser.

This is where Cascading Style Sheets come in. Style sheets specify how elements inside a HTML page should be rendered by a browser.

Using style sheets

You can apply style sheet information in a HTML page in several ways:
  1. Link to an external style sheet with the LINK element.
  2. Supply style sheet information with the STYLE element. Inside this element you can put style sheet information, and link to an external style sheet.
  3. Add style sheet information to a HTML element with the STYLE attribute.

You must use a browser that supports style sheets to view the following examples properly.

Attributes

W3 3.2n
4.0y
NS 3.0n
4.0y
IE 3.0y
4.0y
TV 1.2n
2.1n
CLASS

This attribute can be used with all HTML elements inside the 'BODY' section of the document. It is used to create different classes of a element, where each class can have its own properties.

For example, lets say we have defined this style sheet:

Source
<STYLE type="text/css">
DIV.ferrari {background: #A00000; color: white;}
DIV.ford {background: black; color: white;}
</STYLE>

This creates two classes for the DIV element, "ferrari" and "ford", each with its own colors. Then you could use these classes:

Source
<DIV class="ford">
Henry Ford's favorite color was black, so were all his cars.
</DIV>

<DIV class="ferrari">
For a car to be a real Ferrari it has to be red.
</DIV>

Result
Henry Ford's favorite color was black, so were all his cars.

For a car to be a real Ferrari it has to be red.

You can omit the element name when you define the style sheet. This means that the class is not restricted to one specific element, but can be used with every element. For example, this style sheet defines the class ".nature":

Source
<STYLE type="text/css">
.nature {background: #00A000; color: #E0FFE0;}
</STYLE>

This class can now be used with all elements:

Source
<TABLE border>
 <TR>
  <TD>A normal table cell</TD>
  <TD class="nature">A table cell with a style sheet</TD>
 </TR>
</TABLE>
<UL>
 <LI class="nature">A natural item.
 <LI>A standard item
<UL>

Result
A normal table cell A table cell with a style sheet
  • A natural item.
  • A standard item

W3 3.2n
4.0y
NS 3.0n
4.0y
IE 3.0y
4.0y
TV 1.2n
2.1y
ID

This attribute defines a unique identifier within the page. An ID is composed by an initial letter followed by letters, digits, "-" and "." characters. The letters are restricted to A-Z and a-z.

You can use this ID to set the style sheet information for the element where the ID is defined, by preceding the ID with a #, for example :

Source
<STYLE type="text/css">
#xyz {font-size: 20pt;}
</STYLE>

<DIV id="xyz">The special xyz division</DIV>

Result
The special xyz division

This is what the W3C Recommendation "Cascading Style Sheets, level 1" says about using the ID attribute with style sheets:

By using the ID attribute as selector, one can set style properties on a per-element basis. While style sheets have been designed to augment document structure, this feature will allow authors to create documents that present well on the canvas without taking advantage of the structural elements of HTML. This use of style sheets is discouraged.

W3 3.2n
4.0y
NS 3.0n
4.0y
IE 3.0y
4.0y
TV 1.2n
1.2n
STYLE

With this attribute you can place style sheet information directly with a element, so that it will be used to render the contents of this element. Using this attribute overrides style sheets from a linked style sheet, identified with the LINK element and style sheet information defined in the head of the page, using the STYLE element.

Source
<DIV style="background: red; color: yellow;font-size: 200%;">
This text has its own style
</DIV>

Result
This text has its own style
Statistics

  Copyright © 1996 - 1999 Rob Schlüter,   schluter@knoware.nl   (last updated 1999/02/03)