From screen to print: Creating a print CSS in Dreamweaver

Creating a print media style sheet

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.

Figure 3. Media type set to "all" with no print CSS document yet applied.

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.

Figure 4. Media type set to "screen" with no print CSS document yet applied.

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.

Page 3 of 5

Previous Page

Next Page