Specifying media type attributes: screen, print, and all

With CSS you can declare a media type attribute within a rule or for an entire style sheet. Media types allow you to specify how a document should be presented for a variety of media. From screen to print, from handheld to aural—it all sounds so useful. Sadly, the reality of the situation, at least at this time, is that many user agents do not support media types well, if at all. The handheld media type (for mobile user agents) may become more useful as pressure is placed on the industry to support it. Until then, the two basic media types you should be aware of are screen and print. (There are actually nine different media descriptors that give you the ability to customize the display of information for a variety of devices. If you are unfamiliar with media types and their possible uses, see my article at Community MX on media types.

By default, if no media type is specified, a style sheet is applied to all media. If you want the CSS to only apply to a single media type, you can declare only one. But you can also declare more than one media type by creating a grouped list of media types, separated by a comma. Adding the media attribute to the linked style sheet (in XHTML) looks like this:

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

Dreamweaver makes it fairly simple to add media types to your linked style sheet. If you prefer letting Dreamweaver do the heavy lifting, simply choose Attach Style Sheet on the CSS Styles panel (either click the link icon at the bottom or use the context menu at the top right). In the Attach External Style Sheet dialog box, navigate to your style sheet and then choose the type of media you are declaring (see Figure 1).

Figure 1. Choosing the print media type using the Attach External Style Sheet dialog box.

If you prefer Code view, Dreamweaver's code hinting will give you all the hints you need to get the code right. In the link to your CSS page, begin typing the word media. When you see it appear in the list, press the Enter key (see Figure 2). A list will then appear allowing you to choose your media type within Code view.

Figure 2. Typing directly in the code window gives you the prompts you need to add the media attribute.

Be aware that when you place your cursor into the code that links your CSS document, you'll get the link Property inspector. Though it would be handy, the Property inspector doesn't currently give you the ability to add your media type.

Page 2 of 5

Previous Page

Next Page