The Language of Style Sheets - Pro CSS Techniques - page 12

file, and its value should always be text/css for CSS style sheets. As you might expect, the href
attribute declares the URL of the style sheet file you'd like to attach to your document. This
URL may be absolute or relative. The final attribute, media , states for which presentation
media the styles contained in the external style sheet should be applied. As Table 2-1 shows,
several possible media types are defined in CSS—and they have varying degrees of browser
support (more on this in Chapter 13).

Table 2-1. Available CSS Media Types

Column Heading 1 Column Heading 2

all Applies styles for all media types

aural Applies styles when listening to the document with a screen reader or

similar audio-rendering device

braille Applies styles when presenting the document with a Braille device

embossed Applies styles when printing the document with a Braille device

handheld Applies styles when viewing the document with a handheld personal

device, such as a cell phone or PDA

print Applies styles when printing the document (or when displaying a print

preview)

projection

Applies styles when using a projection medium, such as a digital projector

screen Applies styles when presenting the document on a screen, such as that on

a typical desktop computer

tty Applies styles when displaying the document in a fixed-character width

setting, such as Teletype printers

tv Applies styles when the document is being presented on a television-style

screen

It's up to each viewing device that supports CSS—be it a desktop computer's web browser,
a cell phone, a PDA, or a web TV device—to render the styles appropriate for the context in
which it's being used. Desktop browsers, for example, know to use styles destined for the
“screen” media type when they display web sites normally but to use those defined for the
“print” type when you are printing; cell phones and PDAs know they should use styles for the
“handheld” type; and so on.
You can use a single style sheet in multiple media by setting the value of the media attribute
to a list, separated by commas. For example, to use the style sheet named styles.css in both
screen and projection media, you'd use the following:

<link rel="stylesheet" type="text/css" href="styles.css" ➥
media="screen, projection" />

We'll cover using CSS media types in much greater detail in Chapter 13.

Using Multiple Style Sheets
You can also attach multiple style sheets to a single (X)HTML document with the <link> tag.
The browser will use all linked style sheets and render the page accordingly.