Les Jones

E-commerce > Printer Stylesheets

I'm still tweaking the blog after switching from Blogger Pro to Movable Type. The latest tweak is to my print stylesheet.

My main page has a list of links on the right-hand side. Anyone printing that page probably doesn't want those links, so I decided to make the sidebar non-printing. This is a quick explanation of how to suppress printing for part of a page.

Most blogging software includes a template with a default stylesheet, either as part of the document header, or as a separate document. Part of the flexibility of Cascading Style Sheets (CSS) is that you can define different stylesheets for different output devices: screen, printer, audio reader, etc.

The first step is to include a line in the document header pointing web browsing software to the print stylesheet (the trailing slash is to make that line XHTML compliant; omit it if you're still validating to HTML 4.01 or earlier):

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

Next, enclose the area you don't want to print in a div tag for a new class called "noprint":

<div class="noprint">stuff you don't want to print</div>

Finally, create a file called print.css on the web server and define a noprint class:

.noprint { display : none; }

That's all you need to designate part of a page non-printing.

Because my new page design has light text on a black ground it could drain an ink cartridge in a hurry. To keep that from happening, I reversed the color scheme for the print.css file (the * matches all elements and classes):

* { color:black; background:white; }

That makes the text print correctly, but I still have some background areas that print in black. Know how to fix it? Post in comments.