How to Properly Design a Print CSS Stylesheet

Targeting unique CSS styles is a simple process based around media queries. Web designers have been using these techniques for years to much success. Yet in just a short couple of years recently stylesheets have grown in tremendous popularity. Now more than ever it’s important to offer not only mobile but print layouts for your visitors.

I’ve put together this small guide for beginners to quickly craft a print-based design. There are standard concepts and layout techniques you should utilize for quicker loading speeds. You also need to be conscious of page length when the design is printed on paper.

Web v. Print Design

We should start off taking a quick look into both areas. These are two completely different design studies which are frequently secluded from each other. But printers are much more common in the everyday household – so it’s not strange for your visitors to expect pages to print nicely.

Unfortunately you are working with much less space on a plain white sheet of paper. This means oftentimes your layout will contort in very strange ways. You’ll have to be considerate of dynamic content including image galleries, content sliders, tabbed divs, and so forth. You almost need to build a mobile-based template but with even less functionality! Visitors won’t need any of it on the printed layout anyways.

But this doesn’t intrinsically mean you should remove all other media from the page. My recommendation is to keep images within the main content, plus your logo, but remove them elsewhere deemed a distraction. It’s best to remove entire areas of your layout which don’t serve a purpose in print – such as sidebar(s) or an extended footer.

Plain White Backgrounds

This is a crucial topic to mention right from the start. Nobody enjoys wasting their ink, and colored backgrounds in your page will do just that. Make sure you remove all repeating images, background textures, and preferably all solid color BGs as well. Even printing in black and white can make content difficult to read with a multi-colored background.

Obviously the solution is plain white, which will work the best in practically every situation. If you have trouble overwriting the default styles include !important declarations into your print CSS code. Also use this if needed to ensure all text is dark enough to read. Keeping everything plain and simple is generally the best strategy.

Identify the Key Elements

Ponder a bit and consider why your visitors would even be printing out your web pages. Would it be for reading material, or maybe part of an image gallery? This is important since you’ll want to manipulate your layout in such a strategic way.

As an example you may have a sidebar which only holds a small navigation menu, ads, and a signup form. None of these elements are helpful to the printed version of your content – so why not hide the sidebar altogether? Using the CSS display: none; property you can totally remove certain aspects of your page. Similarly you could widen the main content area so text will fill up more space, thus printing out less pages.

For some websites it may be too much work to recreate an entire stylesheet from scratch. This is especially true if you visitors wouldn’t mind keeping the same layout in printed form with just a few minor changes. For this task you can incorporate CSS media queries which target print devices only.

Stand-Out Links

Hyperlinks will surely be sprinkled all about your documents. These aren’t entirely important in printed context, but you should keep them distinguished just in case people re-visit your website looking for more reading. You could stick with the standard blue/purple colors which also appear great in black & white print.

Believe it or not we can also manipulate direct hyperlink URLs right into the page using CSS2+ properties in compliant browsers. A List Apart provides some good code examples of this even using relative URL schemes(ie. /articles/2011/mypost.html).

body a:link:after, body a:visited:after {
content: " (" attr(href) ") ";
font-size: 10%;
}


This will insert both parentheses in quotation marks and the href value directly after the hyperlink text. It’s a great way to provide printer-friendly support for links on your website. Note that for this to work properly you should be using full URLs which include the root domain of your site.

Using CSS Media

To first clarify there is a difference between the @media query and the HTML media attribute. Both of these delineate between printed CSS code, but @media is included within the document itself.

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

In the example above we’re looking at an alternative stylesheet which you would include into your document header. The media attribute means these styles will only be applied when the page goes through a print action. So you won’t actually be able to test these without printing a live copy. But how else could you check the results realistically?

<style type="text/css">
@import url("css/print.css") print;
</style>

If you’re trying to keep print styles running in modern browsers you could also use the @import statement. This is just another alternate way of including print-specific code. But you won’t be mixing up alternate stylesheets as this bit of code is overlooked in legacy browsers.

Otherwise CSS Media is definitely an option, albeit targeted towards thinner stylesheets. These media queries can be included directly into your default stylesheet – so it’s best to keep them below 15-20 lines of code. The difference is how properties would cascade depending on which document you’re using. Some styles may overwrite your new rules or ignore them altogether. In general it’s best to keep these two document styles separate whenever possible.

Direct Page Margins

There is one more technique which doesn’t appear in too many CSS resources. Using the @page method along with a class of selectors you can apply new printed margins on the outside of your content. I’ve included the basic code syntax below:

@page selector {
margin: 0.5in;
}


The selector code is optional and can use either :first, :left, or :right to target the first page only, or the left/right margins on all pages respectively. In my example above we’re using the standard margin property to expand on all sides by half an inch. You could also use centimeters(cm) if the units fit your layout better.

If you want to check out some further reading I highly recommend WebDesigner Depot’s post from back in 2010. It includes a lot of reference guides and great tactics for using page margins by default. These properties aren’t exactly “beginner” material, but the information is easy to pickup and with practice you’ll retain the knowledge very quickly.

Conclusion

Regardless of how you include the styles or what changes you makes on the page, having any type of print stylesheet is better than nothing at all. It offers your visitors an easy way of taking your content portable without the need for a mobile device. And since CSS makes it so easy the entire conversion process can be completed in an afternoon. If you have similar ideas for print-based CSS styles please share with us in the discussion area below.