HTML and CSS Reference
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
Applies styles for all media types
Applies styles when listening to the document with a screen reader or
similar audio-rendering device
Applies styles when presenting the document with a Braille device
Applies styles when printing the document with a Braille device
Applies styles when viewing the document with a handheld personal
device, such as a cell phone or PDA
Applies styles when printing the document (or when displaying a print
Applies styles when using a projection medium, such as a digital projector
Applies styles when presenting the document on a screen, such as that on
a typical desktop computer
Applies styles when displaying the document in a fixed-character width
setting, such as Teletype printers
Applies styles when the document is being presented on a television-style
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.