Rob Schlüter HTML tag list: Cascading Style Sheets

Cascading Style Sheets

Description
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. The complete specification for the level 1 reference of the cascading style sheet mechanism is available at http://www.w3.org/pub/WWW/TR/REC-CSS1 out=> .

Using style sheets
You can apply style sheet information in a HTML page in several ways:

Link to an external style sheet with the LINK element.
Supply style sheet information with the STYLE element. Inside this element you can put style sheet information, and link to an external style sheet.
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

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:

<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:

<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>

With the following 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":

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

This class can now be used with all elements:

<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>

A normal table cell A table cell with a style sheet

A natural item.
A standard item

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 :

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

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

Which looks like this:

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.

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.

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

This text has its own style