Using CSS for print

"You should offer your visitors a PDF."
"You should know that the Web isn't for printing."
"You should offer your visitors a print version."

Have you heard this well-meaning advice? I beg to differ. Here's why.

• PDF's are appropriate only for certain things. For example, if you're running a science fair which has a Web site, and you want to offer your volunteers a copy of the schedule, they won't mind the time spent waiting for the darned thing to load before they even get to print it. But for a newsletter? You'll only frustrate your visitor, both with the time required and the sudden shift of environment. Don't frustrate your visitors. They'll leave faster than you realize.
• Who says the Web isn't for printing? Just because the browsers are behind the times in understanding that visitors will always like printed copies of certain pages? We can expect more of the Web, don't you think?
• So you have a different page for printing. Oh, don't you just love maintaining two html files for every one? Let's see, so if you have fifty pages on your site, you're maintaining a hundred pages? No thanks. Worse, your visitors want to print from where they are now. They don't want the extra step of clicking on some other link just to get what they think they were already looking at.

What to do about print?

The answer is to use a separate style sheet just for print. Call it "print" or some equally unexciting name, with a filetype of CSS, of course. I call mine "print.css"

Inside your print.css, you can put lines like these:

My pages happen to have a div that's a masthead, and a div that's a navigation bar. Hence the names! Here's how they look:

I don't want those printed. They're just clutter for my visitors. For an example, look at this Web page, and notice the navbar and the masthead. Now try a print preview using the browser's print button, and see that the masthead and navbar are gone.

So how do you code this link? Well, I suppose you could just click on "view source" and see the source code of this page, but I'll save you the effort and put a similar example here:

What else to put in the print style sheet? Anything you want, basically. Here's something I have in my print style sheet:

"Screenonly" is a div that I sprinkle around in some of my pages for lines that I don't want printed. For example, sometimes I have anchor text that allows my visitors to click to a different part of the page. They can't use that for anything if they're reading the printed version! So, around that code, I put a

You might guess by now that I have a parallel div in my screen style sheet. It says:

I use the above for stuff I want printed, but isn't necessary for my visitors to see on their screens. I mostly use it to advertise my URL. That way, when a printed copy gets passed from hand to hand, it has a nice advertisement for where it came from. But you might be more creative than I am about other stuff that you'd like printed but not displayed on the screen.

One more print style sheet example

As I mentioned above, I have a masthead (at the top of the page) and a navbar (on the left), which I suppress when printing. However, this would mean that two other divs, which I call LEFTSIDE and RIGHTSIDE, will kind of be positioned wrong for print. So, in my print style sheet, along with suppressing MASTHEAD and NAVBAR, I also adjust the position of LEFTSIDE and RIGHTSIDE. Here's how it looks:

What I've done is to shift them both over to the left of the screen so that the printed version doesn't have a blank area where the masthead and navbar used to be.

Only one HTML page to maintain!

The result of this very simple work? I only have to maintain one page for print and screen. And even better, my visitors don't have to think about print. If they want to print my page, they just use the browser's print button. That's it.

Any questions about print style sheets?

E-mail me at Contact Linda Moran with questions, corrections, or suggestions. I'm learning all the time.

Find out more

Want to find out how else to make the most of your Web site? The book, Search Engine Marketing, Inc., by Mike Moran and Bill Hunt, is available on Amazon.com. There's something for everyone in this thorough, delightfully written text that covers every aspect of Search Marketing. I know from the inside—I personally ripped it to shreds a few times while it was in the making.

Click on the book cover for more information.

And just who is Linda Moran, and why does she call herself "Search Wifey?" Find out  who is Linda Moran?

Did this page help you?

If the free information on this page was helpful to you, might it help your visitors as well? Consider linking to this page. And do you have friends with Web sites who could benefit from a link to this page? We'll help you e-mail all the link information to yourself or anyone else of your choosing. Just click on the e-mail icon.

---

 Linda Moran    Home | Cognitive therapy | Disabilities | Intuitive Eating | Technical

Published
articles

 

Read my resume

 

 

Professional services

 

Reprints

 

Contact Me

 

Site Map

 

My maiden name