Creating A Print Stylesheet

in 5 Easy Steps

Perhaps one of the easiest, yet most overlooked aspects of usability is the use of a stylesheet for printing. Consider the value of pages printed from your website.

Scenario 1: Bob prints a page from your site. He then gives a copy to Mary. Mary finds it interesting and decides to visit your website. She becomes a regular visitor to your website, clicks on your most profitable ad(s) or even buys your product or service.

Scenario 2: Bob prints a page from your site. When he takes it out of the printer he sees that the last 7 characters of each line is missing. Much of the page is taken by your navigation menu and Adsense ads. He might write the missing characters in, he might opt to cut and paste into a word processor (if he knows how), or he may just throw it out. He might mention the experience to Mary; but she won't visit your website.

Obviously, Scenario 1 is what all website owners would prefer.

The answer is something you are probably already using for your website; external stylesheets. This How To only focuses on creating an external stylesheet for printing and assumes you have basic HTML and CSS skills.

Creating the External Print Stylesheet

To create a stylesheet for printing there are a few relatively easy steps. Before creating a print stylesheet, make sure that all of your formatting is already in place in your current stylesheet. If you make additional changes remember that you will need to edit both the original stylesheet and the new print stylesheet.

1. Save a copy of your stylesheet and name it forprint.css or something of your own choosing. Only the printed version of the webpage will be affected by this new file.
   
   
2. Change your link statement to indicate that your current stylesheet is to be used when the page is displayed on the screen (where yourstylesheet.css is the name of your original external stylesheet):

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

3. Add the following to tell the browser which stylesheet to use when the web visitor is printing the page (replace forprint.css with whatever you named the file in Step 1):

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

4. Now the fun begins...open your new print stylesheet. Any <DIV> statement that is used in conjunction with navigation, advertising, or any other information that the visitor need not print; change the style definition to display: none

   For example: #navigation { display: none; }

   This will cause an area to not be displayed on the printout without having to use scripts or "printer pages". Since this CSS file will only be accessed when page is printed, your visitors will still see the original styling when viewing the page online.

5. All that's left now is to make the page look good and some general housekeeping.

How To Make The Printed Version of Your Webpage Look Good

1. Make sure that any text that was originally displayed on the screen in white or a very light color is changed to black or some other dark color.
   
   
2. Make sure that formatting of headings, paragraphs or lists translates well to printed. That 4px border may look perfect online but it may look heavy and ugly on paper.
   
   
3. Test your work and once you have gotten the page looking airly good, go back through the file and remove any extraneous formatting.

   a. Most people have their browser set up to not print background images or colors. You can safely remove those aspects of the stylesheet.

   b. If an element you do not wish to display has one or more child elements, the child elements can be safely removed from the stylesheet.

   c. Since some people do not use color printers, rethink formatting that relies on color. You might want to use font face, text weight, and text decoration for making text stand out.

New Options With a Print Stylesheet

Print stylesheets make some new options for making your website more effective.

1. Create a paragraph or DIV style that is only used when the page is printed to display a bio/breadcrumb about you and the page being printed.

   You can't assume that everyone will be set up to do this automatically. And this gives you the ability to invite them back to your site.

   Be aware that the search engines see this as content and have included some of this type of text from my websites in the description of the results.

   Don't forget to put this style in your screen (original) stylesheet with a display of none, otherwise it will appear online unformatted.

2. You can suggest where page breaks should occur; but, be careful with this technique. Differences in printers and margin settings may cause unfavorable results. While this is an option you have, it is one I don't recommend.
   
   
3. With span statements you could print the actual link address rather than just print the link text. That way someone who reads the printed page could go directly to any other pages mentioned. For example:

   <p>For more information, go to <a href="more.html">Great Stuff</a>.</p>

   Could become:

   <p>For more information, go to <span class="no_print"><a href="more.html">Great Stuff</a></span><span class="print_only">www.yourdomain.com/more.html</span>.

   Again, bear in mind both versions will be seen by the search engines, and both may be included in result descriptions.

4. Do your visitors a favor and don't make them print your spiffy, but ink intensive page banner. Instead, create a simple logo or some other image that won't use half their ink cartridge. Use span or DIV to indicate the new image is for printing only.

This is all it takes to design the look of your webpage when it's printed!

Trust me, your visitors may not know how you did it; but they will appreciate that you did. Creating an external stylesheet for printing is a simple way to make your online information usable and will help to enhance your website's credibility.

Be sure to check out Help For Web Beginners other HTML & CSS Tutorials.