Use a Print Style Sheet
December 23rd, 2007 - css xhtml
This is a quick tip that I didn't know about for a long time after I started with CSS. This is something that takes a few minutes and can give a website a much more professional appearance.
When you're linking your style sheets to your documents either by using <style> and import() or using <link> and the href= attribute, you've probably seen the attribute media="all". What this is actually doing is telling a browser when it should be using the style sheet you've written. media="all" tells your browser to use this style sheet in all situations.
We can change this to apply different style sheets depending on how the user is viewing your web page. Two increasingly common uses of this are for users with mobile devices and also to change the look of the web page when it is printed. This article focuses on the later. You can read more about the other types of users that you can target here.
The goal of applying a separate style sheet for printing is to use less paper/ink and also make the content easier to read. This usually means two things.
This technique only works well if you're using a well coded xhtml/css layout. There are plenty of great resources on the web describing how to do this if you need them.
Hiding Everything But The Content
Someone is probably printing a page from your website because they are interested in the content on that particular page, not because they like the way your footer looks. This can be accomplished by hiding any elements on your website that are not the content. This includes headers, navigation, sidebars, and footers.
Resizing the Main Content Area
The content area on you website may be set to a smaller width to accommodate navigation or other page elements. Printed content should take up the entire width of a page. If the content is set to a smaller width, the content will take up more vertical space and require more pages to print.
Convinced yet? Alright, well here's how we accomplish it.
After you've written your main style sheet, write a separate style sheet that accomplishes the two goals outlined above. You can name this file "print.css" and place it in the same directory as you're main style sheet. Here's a sample of what mine looks like:
The first block of this code sets display: none for any parts of our layout that we don't want to be printed. The second block of code sets the width of our content area to 100%.
Now that we have our print style sheet, we need to apply it. This is accomplished by linking it directly below our main style sheet using either @import or link and specifying media="all". All of the rules in your print style sheet will be applied in addition to the rules in your main style sheet.
Or
To test this out, refresh your web page and go to Print -> Print Preview. You should see only the content of your website and none of the navigation or other parts.
You can also see this in action on this web page as well. Go to Print -> Preview to see what this page looks like when it prints.
Questions / Comments / Suggestions
You can reach me through the contact page if you have any comments, corrections, or suggestions on this article.