From Screen to Print: Creating a Print CSS in Dreamweaver

By: Stephanie Sullivan

Page 1 of 6

Set for printing



Questions often arise about how to print web pages. Should you create a separate, simple page for printing? Should you just leave users to their own devices knowing they control whether backgrounds or images print anyway? Cascading style sheets (CSS) make it simple to maintain a single page while presenting the content in two different manners using media types.

In this article, you'll learn about media types and how to take advantage of them to create compact pages for print. At the end of the fixed-width chapter of the book Greg Rewis and I wrote called, Mastering CSS with Dreamweaver CS4 (there's also a Dreamweaver CS3 version of the book if you have not yet upgraded), we discuss the rules of creating a print style sheet. In this article, you will see those principles in action as you build an example CSS page. Let's get started!

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 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).

attach external style sheet
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.

adding the media attribute in 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 1 of 6 1 2 3 4 5 6 Next

Download Support Files

CSS, media type, dreamweaver, print style sheet, screen, print, all