Applying a Media-Specific Style Sheet

Earlier, in Figure 15.1, you saw how a little printer icon allows you to view a special print-friendly version of a page. This type of icon is popular on many news sites, and it's an important feature because you otherwise might not want to hassle with printing a page and wasting paper and ink on the graphics and ads surrounding an article. Although the printer-icon approach is intuitive and works great, there is a more automatic option.

The option I'm talking about involves using a print-specific style sheet that is automatically applied to a page if the user elects to print the page. CSS supports the concept of media-specific style sheets, which are style sheets that target a particular medium, such as the screen or printer. CSS doesn't stop with those two media, however. Check out the following list of media that CSS allows you to support with a unique style sheet:

• Computer screen

• Printer

• Television

• Projection screen

• Handheld

• Braille

• Embossed

• Text-only

• Aural

Perhaps the most interesting of these media is the last one, which allows for web pages that can be read aloud or otherwise listened to. Clearly, the architects of CSS envision a Web with a much broader reach than we currently think of as we design pages primarily for computer screens. Although I'm not suggesting that you worry too much about aural web page design just yet, it serves as a good heads-up as to what may be on the horizon.

The good news about style sheets as applied to other media is that they don't require you to learn anything new. Okay, maybe in the case of aural web pages you'll need to learn a few new tricks, but for now you can use the exact same style properties you've already learned to create print-specific style sheets. The trick is knowing how to apply a style sheet for a particular medium.

If you recall, the <link /> tag is used to link an external style sheet to a web page. This tag supports an attribute named media that you haven't seen yet. This attribute is where you specify the name of the medium to which the style sheet applies. By default, this attribute is set to all, which means that an external style sheet will be used for all media if you don't specify otherwise. Following are the other accepted values for this attribute: screen, print, tv, projection, handheld, braille, embossed, and aural. Not surprisingly, these attribute values correspond to the list of media you just saw.

Establishing a print-specific style sheet for a web page involves using two <link /> tags, one for the printer and one for every remaining medium. Following is code that handles this task:

 <link rel="stylesheet" type="text/css" href="player.css" media="all" /> <link rel="stylesheet" type="text/css" href="player_print.css" media="print" /> 

In this example, two style sheets are linked into a web page. The first sheet targets all media by setting the media attribute to all. If you did nothing else, the player.css style sheet would apply to all media. However, the presence of the second style sheet results in the player_print.css style sheet being used to print the page.

By the Way

It is also possible to use the @import command to link media-specific style sheets. For example, the following code works just like the previous <link /> code:

 @import url(player.css) all; @import url(player_print.css) print; 

Watch Out!

You might have been tempted to specify media="screen" in the first linked style sheet in the previous code. Although this would work for viewing the page in a normal web browser, it would cause problems if someone viewed the page using a handheld browser or any of the other types of media. In other words, a style sheet applies only to the specific media types mentioned in the media attribute, and nothing more.

You can specify multiple media types in a single <link /> tag by separating the types with a comma, like this:

 <link rel="stylesheet" type="text/css" href="player_pp.css" media="print, projector" /> 

This code results in the player_pp.css style sheet applying solely to the print and projector media types, and nothing else.