Print a Web Page with CSS

hand holds paper

We often look at web pages on desktop computers, laptops, tablets or on smart phones, but there are times one needs a good print version of a web page. Have you ever printed one of your web pages and said, oh, yuck, I didn’t really need that menu to print or that image? You can more carefully control how the printed version of the page appears if you use media styles in your style.css file. If you use WordPress, the style.css is the main style sheet found inside your theme folder (you can learn how to access the style.css file using FTP).

All you need to do is add the following to the bottom of your stylesheet:

@media print
… CSS rules will go here …

In there you will type the style rules you need. Mostly, you will probably want to hide elements of your page with display:none. You might also want a particular font to appear larger or smaller (font-size: larger or font-size: smaller are good declarations to know). So let’s say you are hiding your menus and your footer, your code might look like this:

@media print
.mymenu, #myfooter {display: none;}

Another consideration is your sidebar. You can either hide it with display: none, or, assuming it is floated to the right or left of your page, you can instead choose float: none, and the sidebar content will appear under or above your main content.

There is an alternative method for creating CSS print rules, and this is by creating a whole separate stylesheet for print. I find the @media rules method discussed in this post to be simpler.

Your Turn, Please

Have you ever looked at a print version of one of your web pages and thought, that’s not very clear and easy to read? May I suggest you try look at the print version of one of your web pages — you can do this without printing – in Firefox or IE, choose File -> Print Preview. What issues have you encountered when you print a web page?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

12 thoughts on “Print a Web Page with CSS

    1. I’m curious what you find. Many web pages aren’t meant to be seen in print, so it may not be so important. But sometimes it is much more convenient to have a print copy (my kids learned these during our post-hurricane outages when they couldn’t easily look up phone numbers on the web).

    1. You could have the size of the images reduced for print. I’m just guessing that it is due to the size. It could be something in the code as well; for example, are they wrapped in paragraph or div tags?

  1. Thanks for the code Leora. I recently switched my social sharing plugin and this one does not have a print button. The sharing plugin that I used previously had that as one of the options but this one doesn’t.

    I usually select what I want to print and then just print the selection but I’m sure not everyone knows to do that. I suppose I could attack my CSS or find another plugin! :)
    Sherryl Perry recently posted…How to Use SEO to Improve Your Website Ranking in GoogleMy Profile

    1. Yes, that’s true – one can just print a selection! But as you say, there are those who can’t quite figure out how to do that. And then there are pages one might want to print quickly. It’s giving the customer ease of use.

Please leave a comment.

Your email address will not be published. Required fields are marked *

CommentLuv badge