CSS Tutorial

Cascading Style Sheets Tutorial

Lesson 2

Linking to an External Style Sheet

An external style sheet may be linked to an HTML document through HTML's LINK element:

Example:

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen> <LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"> <LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"> <LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>

The <LINK> tag is placed in the document Head. The optional TYPE attribute is used to specify a media type--text/css for a Cascading Style Sheet--allowing browsers to ignore style sheet types that they do not support. Configuring the server to send text/css as the Content-type for CSS files is also a good idea.

External style sheets should not contain any HTML tags like <HEAD> or <STYLE>. The style sheet should consist merely of style rules or statements. A file consisting solely of

P { margin: 2em }

could be used as an external style sheet.

The <LINK> tag also takes an optional MEDIA attribute, which specifies the medium or media to which the style sheet should be applied. Possible values are

screen (the default value), for presentation on non-paged computer screens;
print, for output to a printer;
projection, for projected presentations;
aural, for speech synthesizers;
braille, for presentation on braille tactile feedback devices;
tty, for character cell displays (using a fixed-pitch font);
tv, for televisions;
all, for all output devices.

Multiple media are specified through a comma-separated list or the value all.

Navigator 4.0 incorrectly ignores any linked style sheets declared with MEDIA values other than screen. For example, MEDIA="screen, projection" will cause the style sheet to be ignored by Navigator 4.x, even if the presentation device is a computer screen. Navigator 4.x also ignores style sheets declared with MEDIA=all.

The REL attribute is used to define the relationship between the linked file and the HTML document. REL=StyleSheet specifies a persistent or preferred style while REL="Alternate StyleSheet" defines an alternate style. A persistent style is one that is always applied when style sheets are enabled. The absence of the TITLE attribute, as in the first <LINK> tag in the example, defines a persistent style.

A preferred style is one that is automatically applied. The combination of REL=StyleSheet and a TITLE attribute specifies a preferred style. Authors cannot specify more than one preferred style.

An alternate style is indicated by REL="Alternate StyleSheet" .

Note that current browsers generally lack the ability to choose alternate styles.

A single style may also be given through multiple style sheets:

<LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary"> <LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">

In this example, three style sheets are combined into one "Contemporary" style that is applied as a preferred style sheet. To combine multiple style sheets into a single style, one must use the same TITLE with each style sheet.

An external style sheet is ideal when the style is applied to numerous pages. With an external style sheet, an author could change the look of an entire site by simply changing one file. As well, most browsers will cache an external style sheet, thus avoiding a delay in page presentation once the style sheet is cached.

IE3 for Windows 95/NT4 does not support Body Bakground images or colors from linked style sheets.

Lesson 3