From screen to print: Creating a print CSS in Dreamweaver

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!

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:

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

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.

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.

There are two approaches for creating a print media style sheet. In the first one, the main CSS document is set to media="all" (or left with no media type which defaults to all). This means all user agents will use this style sheet. It also means when you create the print CSS document, it must override all unnecessary styles and positioning since all the main styles will be available to the printed medium. The example page, using a media type of all and as yet no print CSS, looks like the image shown in Figure 3 when printed.

Note that everything seen in the browser would print if no print CSS were added. But that is only partly true. Your user actually has control over your page that you can't affect. Specifically, users decide whether to print your background colors, images, or neither. There is no way to force them to print the backgrounds and thus, you have to remain aware of what your page will look like if they choose not to print your backgrounds. I will cover strategies for that later in this article.

One thing to be aware of when using this method is that when you are removing or redefining page elements that are in your main CSS document, it is important that you use exactly the same selector name in each style sheet. Though it is true that the selectors div#mainContent and #mainContent (which selects any element with the ID of #mainContent) can select the same thing, it can cause problems in a print style sheet. You need to keep the selector just as specific in the print style sheet as you've written them in the all style sheet. The #mainContent selector in some cases will not override the style if the original selector is div#mainContent. So, for example, when redefining an H1 element in #mainContent div, even if the only H1 on the page is in #mainContent div, you should still write it as #mainContent h1—if that's how it was written in the original style sheet. Doing this right from the beginning can save you hours of effort trying to figure out what is wrong!

The second approach, and the one used in this tutorial is to set the main CSS document's media type to screen. This effectively hides all CSS from the printer (until you add a print CSS document). Many times, it is much simpler to use the flow of the document and define the styles you want for print without having to override all the styles and placement already defined for the browser. The example page, using a media type of screen and as yet no print CSS, looks like the image shown in Figure 4 when printed.

Note that without any CSS applied during print, the page is laid out in the order the HTML elements appear in the source code of the document. This is the natural flow of the page. Using the flow is a great way to present a document for printing. Some browsers can have issues with floating or positioning (or cutting off parts of floated elements) so removing that from the equation has advantages. You also must remember that you are now in the printed medium. Creating a legible printed document is different than creating a document on screen. As much as possible, you want to use the rules of print here, including margins, fonts, sizing, and layout.

Due to the cascade, the order in which style sheets are linked in the head of the X/HTML document can affect rendering in various user agents. If you were using the all media type, it would be placed first in the hierarchy. Any and all devices that render information would access this document. Then the print CSS (or handheld if you are supporting some mobile user agents) is placed in the head of your document after the main CSS document. This allows the later CSS documents to override styles in the main CSS document as necessary. Be aware that if you are using Internet Explorer Conditional Comments (IECC) to feed Internet Explorer–specific styles to correct its browser rendering, you will want your print CSS document to follow these (unless you have specifically set the CSS in the IECC to screen).

When using the screen media type, the cascade is not as important since the printer will not read the screen CSS document. Figure 5 shows the page with the print CSS applied.

You can open your page in a browser and look at a print preview to see what is shown in Figure 5. There is, however, an easier way within Dreamweaver. At the top of the document window is the Style Rendering toolbar. (If you don't see it, either right-click in the top area of the document above Code or Design view and enable it, or choose View > Toolbars > Style Rendering to turn it on.) Using the Style Rendering toolbar you can view your page with any of six media types, with no styles at all, and with Design-time style sheets (styles viewed only in Dreamweaver). Clicking the second icon (the printer) gives you a very good idea of how your page will appear when printed (see Figure 6). It is always a good idea to check a variety of browsers and printers when you are done as some may vary slightly.

Keep in mind that the different media type styles will only show in Design view. If you're using Live view to view your document, you will see the screen/all media type at all times.

The goal is to enable the user to print content that is balanced and attractive on the page. Keep in mind that you are now wearing the hat of a print designer. Thus, you will now define units of measurement using inches and points instead of pixels for consistent results. I start by defining the overall width of the page. I give the body selector a width of seven inches. My personal experience has shown that this setting consistently works for me.

Sans-serif fonts look far better on the monitor, but what's best on the printed page? There is a good reason books are not printed using Verdana, Lucida Grande, or Arial. Serif fonts display better for the eye in print since the serifs assist the eye in making out the letterforms. Changing your print pages to a serif font like Times New Roman or Georgia will make your printed pages more readable.

Since you are now styling print, this is the perfect time to define your font sizes and line height in points (never do this for screen). Note that I defined the text color as black. Reading large amounts of text in black is much easier on the eye.

Note: If you are unfamiliar with shorthand CSS properties used in many of the selectors here, you will find Writing Efficient CSS by John Gallant and Holly Bergevin very helpful.

Hiding elements from the printed style sheet

The next step I take when creating a print style sheet is to decide what information is not relevant to the print medium. Navigational elements, decorative images, and even some advertisements are usually unnecessary. With this in mind, you can remove these elements to make a lean, mean printing machine.

The example page shown in Figure 4, unlike a normal web page, has no navigation (it is the first full project of the book and we attack lists and navigation in the following chapter). If it had navigation, we would definitely hide it since there is no way to navigate within a printed page. There are three completely decorative flower images, which are unnecessary. You'll want to change their display to make them completely disappear.

Although the book covers the display property in detail, I'd like to do a quick review to set the stage for the rest of this article. An HTML element has several display properties that control the type of box it renders. The most common are block and inline. You can use CSS to override the natural display of an element. If you set an inline element to display:block, its behavior will be the same as that of a block-level element. It will generate a block box, starting on a new line and taking up 100% of the width of its parent.

In the same way, we can cause an element not to generate a box at all using display:none. Using display:none causes no space at all to be taken up by the element targeted. Some people are confused at the difference between visibility:hidden and display:none and so try to hide elements using the visibility property. With visibility:hidden, the element will be hidden, but its box is still generated in the flow of the page. Thus you will have your invisible element as well as a big space on the page where it would have been. Not exactly what you want when you are reworking the look of a page for print!

For the example page, start by hiding the decorative images. The two blue flowers have a class on them called .overhang. You can wipe both of them out at once by adding that class to the display:none rule. Unless I'm building a site for a realtor, artist, or another business where images are integral to the content, I hide them all with a descendant selector. In this case, the images are in the #mainContent div so you can write a selector that gets rid of all images in that div, #mainContent img. The grouped selector looks like this:

If you are not familiar with a grouped selector, it is a great way to write more succinct CSS, especially in a print style sheet when you need to hide a large number of elements. Placing a comma between selector names allows you to give the same properties and values to all the selectors at once. Just remember not to have a comma after the last selector or browsers won't apply your rule.

The logo switcheroo

In general, logos should be placed in the actual page as an image with an alt attribute (for assistive technology). Usability studies have shown that a majority of surfers expect to return to the home page when they click the logo. It is best to give them what they expect. In print, there's another good reason—you have no control over background images, remember? So if you place the logo into your document as a background image, you could lose it altogether.

One thing I do in most every print CSS page is remove nearly all the color. Why waste your user's ink? Removing the color is welcomed by most users since what they're really interested in printing is the content of your page, not the design. There are times the client wants their logo left in its original colors, but others have a grayscale version they're happy to provide. If you are going to use a black and white print logo, there is a very simple way to make the switch.

Place the print logo into the HTML document right next to the screen logo. The code looks like this:

In the code above, the color logo in the #header has an alt attribute as well as a link around it that returns users to the home page. That is how the code of the page would normally be written even if you were not styling for print. Following the color logo is a second, black and white logo. It's not necessary to have a link on this logo since the logo will be set to display:none in the screen CSS (using the same method used to hide elements in the print CSS). However, in case any older assistive technology is still able to see the print logo, using an empty alt attribute will keep it from being read aloud. The trick is in the two classes—one called .screen and one called .print.

The .print class is placed on the black and white logo. In the screen CSS page, that is set to display:none. By using a class called .print, you can actually place this class on other elements if needed:

The .screen class is placed on the link that surrounds the color logo. This allows us to remove the link as well as the image itself (the reason for removing the link will become apparent later in this article). In the print CSS, you'll add the .screen class to the display:none grouped selector:

Hiding the print logo for screen rendering and the screen logo for print rendering allows you to show the desired logo at the proper time. If you were creating your print style sheet using the method where you placed the media type all on your main CSS and then overrode the selectors as needed using your print CSS, you would need to take one more step. In the print CSS, you would have to set the .print class to display:block in order to cause it to render a block box again.

The same principle holds true if you are using floating or positioning in a CSS page with a media attribute of all. Many times in the print CSS, you will need to override it to get the desired rendering in print:

• float:none can be used to override float:right or float:left
• position:static can be used to override position:absolute or position:relative
• overflow:visible can be used to override overflow:hidden (a common clearing technique)

Defining the headings

I generally change my headings to a gray tone and set their sizes in points. With heading-size letters, even in grayscale, dark gray is quite readable. I also prefer to group the heading with its text. So I tend to either remove the bottom margin from the headings and downsize the top margin on the P element to make them appear closer together or use a bottom border with a nice bit of padding above the header to space it down the page a bit. Unlike backgrounds, borders will show when printed. Users don't have control over them.

The following code sample shows some simple styling for headers that gives your page a bit of definition in print. Play with it a bit to get the look you want.

Defining footers

Some footers contain information that is not important in printed form and as such, can be hidden. Either hide the whole footer by adding it to your display:none grouped selector or hide portions of it by attaching your .screen class.

If you would like to add the copyright or other information to your printed page, restyle it to be less obvious. Try lighter, centered text in a smaller size. Experiment with a more narrow width with a top border. Use your imagination. Be aware that some printers will not render lighter grays exactly as you define them and will darken them considerably.

In the screen CSS, that class was written to be really small. In printing the selector for the screen CSS is not seen. Without a style defined, the break creates a space. It is not needed in the print page; simply add the .clearfloat class to your display:none rule so it will not be rendered at all.

Dealing with links in printed form

Because links cannot be clicked in a printed document, it is best to either remove the underline or, if the link is important, add the full path for the URL. Though it will not work in current versions of Internet Explorer (a shock, I know), you can show your URL paths for standards-compliant browsers by using generated content and the :after pseudo-element.

First, I define the look of the link itself. In this case, I made it slightly lighter gray and bold.

Then, I add the code for generating the look of the links using generated content. In this example, I want the URL for links outside my site to appear right after the link text. But local links within the site (using root relative linking, for example /index.html or /about.html) won't render at all.

In the first example below, a:after is the pseudo-element selector. The generated content will be added after the link in the page. The property that causes this to happen is content. The value for that property is within the quotation marks and is the content that will be generated on the page. In our example, it first adds a space, then a square open bracket followed by whatever URL is in the href attribute of the link, followed by a closing square bracket and no space. You could use angle brackets, asterisks, dashes or other characters if you prefer. Putting a space inside the first quotation marks will render; so if you want one add it. If you don't, the regular spacing will be used. The second property/value pair simply sets the URL's font weight to normal to differentiate it from the link text.

In the following example, the rule ( a[href^="/"]:after ) selects a link whose href attribute begins with a slash (making it root relative). When it finds such a link, it overrides the previous selector that displayed the URL by using the property/value pair content:"". The empty value in the quotation marks causes nothing to render after the URL at all. Thus, root-relative links within your own site won't generate content.

I hope this article has made the basics of creating a print style sheet more clear. Experiment and create your own great print pages. For more examples and projects, be sure to check out Mastering CSS with Dreamweaver CS4. Happy coding!