Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Toggle Open Guide Table of ContentsGuide Contents

Close Table of ContentsGuide Contents

Close Table of Contents

Cascading Style Sheets Part 3: Media Style Sheets

Last updated Oct 17, 2003.

By Sarah Horton, author of Access by Design: A Guide to Universal Usability for Web Designers

The web is a modern marvel in document publishing. At its core is the promise of a single document that can perform well in multiple contexts: on a cinema or cell phone display, a television or projection screen, printed in ink or braille, read by a person or software application. One of the more powerful components of this multi-purpose system is the media attribute, which allows designers to apply context-appropriate CSS and, for example, hide navigation for print, or use a single-column layout for small screens.

Unfortunately, beyond screen and print, there is little support for media types, with the exception of handheld, which is supported on some mobile devices. Also, media-specific designs tend not to be as effective as they could be. Most of us who supply media style sheets tend to do so after the fact, first designing for screen and then modifying the design for print and handheld. We clearly have some work to do before we achieve the promise of the web.

The next articles in this series on Cascading Style Sheets focus on using the tools we have at hand to broaden our focus from the screen into other contexts. In this article, we cover the nuances of invoking external style sheets from HTML documents, and the anticipatory design approach we must adopt in order to design well in other contexts. In subsequent articles we will cover how to use CSS to create effective designs for print and small screens.

External Style Sheets

Styles can be defined in many ways: using the style attribute within element tags, in the head element of the page, or in an external style sheet. Generally speaking, external style sheets are the way to go. It's easy to modify, for example, the body background color for an entire site when the body background color property is defined in a single location. To design for different media, we can define separate style sheets for screen, print, and handheld. And as with defining styles, there are a number of methods for invoking external style sheets. We will focus on using the link element.

The link element allows us to explicitly define relations among documents. Take, for instance, the online version of my book, Access by Design. As a book site, there are standard elements: table of contents, chapters, page sequences, copyright information. A reader on one page may want to navigate to the next page in the sequence, or jump to the chapter contents or copyright page, and the link element allows for just that. To try it out, use Opera, which is the only browser I know of that has built-in support for link relations. Display the Navigation toolbar (under View/Toolbars) and then load Design for keyboard access. The toolbar will display links to Home, Contents, Next, Previous, and Copyright. Pretty neat, huh? Unfortunately, since browser support is pretty minimal, most sites don't go to the trouble of coding these link relations.

On the other hand, link can be used reliably for defining external style sheets. In the attributes of the link tag, we specify the relationship of the linked file (stylesheet), the type of file (text/css), its location (main.css), and in which media context it should be applied (all). The link tag must appear within the head element (Listing 1).

Listing 1


<title>Acme Widgets: Products</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all" />


The default value for the media attribute is "all", which means we can omit that attribute if we wish to apply the "main.css" styling in all contexts (Listing 2).

Listing 2

<link rel="stylesheet" type="text/css" href="main.css" />

Styling for Different Contexts

The media attribute of the link element can be used to specify media-specific styling for pages that are, for instance, printed in braille, projected, or displayed on TV. For this discussion, we will focus on the three most practical and widely used media attribute values: screen, print, and handheld.

One way to style for different media is to declare one master style sheet containing rules that apply to all contexts, and then provide media-specific rules in separate media style sheets. In Listing 3, "main.css" applies to all contexts, whereas "screen.css" is invoked when the page is viewed on screen, "print.css" when the page is printed, and "handheld.css" when the page is accessed via a mobile device.

Listing 3

<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

On the surface, this appears to be a good approach. However, in practice it can cause inheritance problems similar to those I describe in my article on overcoming browser defaults. The print and handheld designs inherit the styles defined in "main.css." If you're not careful, you may find yourself overriding your own styles in order to produce an appropriate design.

For example, say we design pages to use pale yellow text against a dark blue background, and define this styling in main.css. While this design might be usable on screen, light text against a colored background is not appropriate for printed documents. Most browsers do not print background colors by default, meaning the pale yellow text will print against the white of the paper, and a page of pale yellow text (or pale gray text if printed on a black-and-white printer) will have limited, if any, usefulness.

Why worry, when we have media style sheets in our bag of tricks? It's true: we can undo the screen-specific styling in main.css by including a rule in print.css that overrides the color settings, setting the text color to "black" and the background color to "none". However, had we not included that rule in the "all" style sheet, we would not have to go to the trouble since by default the text color is black and the background color is none. In general, our time is better spent applying styles rather than undoing them.

A shared style sheet invoked using media="all" is not necessarily a bad idea. In fact, it's a good way to enforce stylistic consistency among several contexts. However, you may find that these contexts—screen, print, and handheld—do not share much in the way of styling. In the end, it may be easier to use a single style sheet, designed expressly for each context, as in Listing 4.

Listing 4

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

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />

Anticipating Contexts

Those of us who style for media tend to think about media style sheets after designing for the screen. As a result, the process of print and handheld design is largely one of undoing screen styles and molding HTML content to something appropriate for these different contexts, which is clearly not the best approach. Instead, we need to ensure that our source document contains all that is needed to adapt gracefully to different contexts.

For example, many pages begin with a banner graphic that serves both branding and wayfinding functions. This low-resolution, color graphic works well on a computer display, but does not fare well printed on a black-and-white printer. A text-based banner might be a more appropriate option for print, and also on a handheld device, since text will scale more gracefully to fit on a small display screen. So, what we want is a graphic banner on screen and a text banner for print and on small devices. Media style sheets, to the rescue? Yes, but...

CSS allows us to hide elements, so we can easily hide the graphic banner in our print and handheld style sheets using the display property (Listing 5).

Listing 5

#banner img { display: none; }

However, what we can't do is conjure up text to substitute the graphic banner unless the text is in the code of the page. In other words, when we design a document, we need to anticipate elements that might be effective in contexts other than screen, include those elements in the HTML code of the document, and then use CSS to hide those elements on screen.

For our banner, we need to include the text equivalent of our graphic banner as HTML (Listing 6) and hide that text element in the screen context (Listing 7). Then, for our print and mobile style sheets, we need to hide the graphic banner (Listing 8).

Listing 6 - HTML

<div id="banner">
<img src="banner.gif" alt="Piggy Banks Galore" width="540" height="90" />

<p>Piggy Banks Galore</p>

Listing 7 - screen.css

#banner p { display: none; }

Listing 8 - print.css and handheld.css

#banner img { display: none; }

Another example of content appropriate for contexts other than screen is the page URL. Displaying the URL on screen has limited utility, but the URL printed in the page footer makes it easy to find the page again and to provide attribution when citing the document. In this case, we would include the page URL in the document footer and use CSS to hide the URL in the media="screen" style sheet.

This type of anticipatory thinking is not customary in Web document design. Indeed, media style sheets are not used that frequently, never mind deliberately. Many sites, such as The New York Times and CNN, offer a print version through the page interface, and a separate version for mobile devices—NYT Mobile and CNN Mobile. However, some sites do use print style sheets with care and deliberation. Take a look at the differences between the screen and print designs on Wikipedia article pages. The print version does not include the banner graphic, but does include a print-only URL in the footer.

Of course, this technique must be used judiciously; otherwise, we end up with bloated code. Since the browser does the work of rendering pages, even elements that do not display must traverse the network, and must be parsed by the browser. And while cell phone users may appreciate a mobile-friendly design, they will not appreciate being charged excessively for data they do not use.

Media style sheets are fundamental to the goal of same source, multiple uses. The challenge to designers is to anticipate the needs for different contexts, and to address those needs at the source. In the next articles we will explore this concept further by discussing design for mobile and print contexts.