Beginning XHTML | 8 | WebReference

Beginning XHTML | 8

current pageTo page 2To page 3

Beginning XHTML

Using the <link> Element

The second mechanism for associating style sheets with media types is to use the <link> element's media attribute, which specifies the intended destination media for the external style information. This allows user agents to load and apply external style sheets based on the characteristics of the media where the document is being rendered.

For example, if you write:

  <link rel="stylesheet" type="text/css" media="print" href="myprint.css"/>
  <link rel="stylesheet" type="text/css" media="screen" href="myscrn.css"/>

you are indicating that the myprint.css style sheet should be used when printing the document, and that the myscrn.css style sheet should be used when displaying the document.

At the time that this book was written, only Microsoft Internet Explorer properly supported the <link> element with media types. With Netscape Navigator, if you specify anything other than the screen media type, Navigator will ignore the entire element, and therefore ignore the entire external style sheet!

Try It Out - Using the <link> Element to Handle Different Media Types

In this exercise, we will use two external style sheets to control the display and printing.

How It Works

We simply took our two style sheets out of the document and put them into separate documents of their own. Note that the content of the style sheets wasn't changed in any way, so that what is seen on the browser and the printed page is identical to that of the last example. In the <head> of the document, we simply associate these external style sheets with the document content like so:

  <link rel="stylesheet" type="text/css" media="print" href="linkprnt.css"/>
  <link rel="stylesheet" type="text/css" media="screen" href="linkscrn.css"/>

We can see that there are two <link> elements. The first identifies the style sheet to use for the print media type and the second identifies the style sheet to use for the screen media type. The files where the style information is contained is given as the value of the href attribute.

When we looked at our document in the Web browser, the style sheet corresponding to the screen media type was opened and used. When we sent our document to the printer, the style sheet corresponding to the print media type was opened and used instead.


current pageTo page 2To page 3

Created: April 4, 2001
Revised: April 4, 2001