Applying CSS from Screen to Print to Handheld – Part 6: Simplified Design and Printability

What Does a Printed Page Need?

To be more precise, what doesn't it need? There are certain things that you need when displaying your page to the screen media type. Items such as navigation are an absolute must, whereas navigation is not required for the printed version of your web site.

If you were creating style sheets for only print and screen, then you could decide not to set a media type for the screen style sheet and, instead, allow it to cascade into the print style sheet. From there you could manipulate the content of both style sheets from within the print style sheet. This could save you time in developing your print style sheet. However, providing two distinct style sheets is never a bad way to set up your content.

Furthermore, I find that handheld devices are CSS-eating monsters; they try to render everything! At times they render the screen media CSS file even when the media type is correctly stated. A page refresh generally sorts out this problem. If you're supplying a handheld style sheet for your website, then you really do need to implicitly declare the media type of each style sheet. Not doing so can be very troublesome for handheld devices and provide you with unexpected and unwanted display problems.

You should also bear in mind that, by default, browsers do not print background images or background colors. If you need to use an image on your site, you need to make sure that it isn't a background image or else make special arrangements for a particular image to print. I will review making "special arrangements" a little later in this tutorial.

Creating a print style sheet does need some thought. Having said that, I can affirm that it's not too difficult to make your page print as you would like—as you will see.

Clearing the Defaults

Just as with the screen media style sheet, you need to clear the default margin and padding settings on all the elements. In fact, you can copy your opening CSS rules directly from your screen health.css file for your print style sheet, as here:

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
   margin: 0;
   padding: 0;
   border: 0;
}

body {
   
   font-family: Arial, Helvetica, sans-serif;
   color: #000;
}

#wrapper {
   margin: 0px auto;
   width: 600px;
}

I copied the three rules shown above straight from the screen style sheet, pasted them into the print style sheet, and made one or two modifications. The first rule, your zeroing selector, didn't change. I removed the background image property from the body rule and changed the width to 600 pixels in the wrapper rule. I also removed the border on the wrapper.

Ordering the Style Sheets

In Safari 2 on Mac OS 10.4 (Tiger) I came across some oddities when the style sheets were rendered and found that it was best to declare style sheets in this particular order. The order shouldn't really matter if you have the media types set, but this kept Safari 2 on Tiger happy. They are shown in the following order, with screen being closest to the opening body tag:

1. print
2. handheld
3. screen

Bearing in mind that it's important what order your linked CSS files appear in the code, I recommend that you insert this code by hand, switch to Code view, and complete the following steps:

1. Make a little room above your health.css link.
2. Type <link href="CSSFiles/HealthPrint.css" rel="stylesheet" type="text/css" media="print" /> and press Enter.

3. Save your work. Your code for linking your CSS files should now look like this:

   <link href="CSSFiles/HealthPrint.css" rel="stylesheet" type="text/css" media="print" />
   <link href="CSSFiles/health.css" rel="stylesheet" type="text/css" media="screen" />
   <!--[if lte IE 6]>
   <link href="CssFiles/IE.css" rel="stylesheet" type="text/css" media="screen" />
   <![endif]-->
   

4. Switch to Design view. Your printed page should now look at least a little more organized (see Figure 4).



Figure 4. Print view already taking shape

Page 3 of 4

Previous Page

Next Page