Web Development: Print Stylesheets & Why They’re Important

Not every website needs a print stylesheet, but it wouldn’t hurt to have one.

What is a print stylesheet? This special stylesheet that specifies what to print from the website page. Setting up this stylesheet is easy. Make sure you link your html to the stylesheet: <link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” />. The browser can’t automatically detect that it’s on the server.

Get rid of anything that is “unnecessary”

Navigation is safe to get rid of for the print stylesheet because the user cannot “click” on printed paper. It’s silly for them to print out something that isn’t useful and uses up their printer ink. Do they really need that logo and random picture of your cat, too?

The main question you need to ask is: will the user really want this information printed out? If the answer is no, it’s best to leave that information off of the print stylesheet.

Display link destinations

Users obviously cannot click on links on a printed page. Displaying the link destinations on printed pages will help the user out significantly. Line 25‘s article “Handy Tips for Creating a Print CSS Stylesheet”shows the code needed to display the link destinations on printed pages.

By supplying the link destinations, the user can print out the page without worrying about where the links were pointing to. It makes it easy for them to go back and reference items.

Widen the content area

Widening your content area for printing helps to conserve the user’s paper. Don’t have whitespace included in the print stylesheet unless it’s absolutely necessary.

Some websites have very skinny content areas from forced width dimensions–these can transfer to the print stylesheet. It is very simple to condense a five page printed website into two pages.

TBH Creative Example

RJE Knoll Business Furniture by TBH Creative

RJE Furniture’s web version.
RJE Furniture’s print version.

Your print stylesheet doesn’t need to be beautiful or highly ‘designed’. The goal is to keep it as simple as possible without confusing the user. Saving trees and using less color ink is also suggested.

TBH Creative

About the author | TBH Creative

TBH Creative is an award-winning marketing company specializing in web design/development, digital strategy, inbound marketing, and reporting. Since 2004, we’ve built multi-dimensional digital marketing campaigns and complex, enterprise-level websites for clients in a wide range of industries.

We believe in communicating clearly, delivering excellence, and beating deadlines. But beyond those ideals, what really drives the heart of our business is your business—helping our clients achieve more with comprehensive digital marketing and web design.

Our Indianapolis web design company is WBE-certified in the state of Indiana and the city of Indianapolis, and we’re also a Hubspot-certified inbound marketing agency.

View more posts by TBH Creative

Previous Web Design: Interactivity with jQuery Next Audio: 3 Tips for Getting Started

Receive articles in your inbox