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?

12 Responses to “Print a Web Page with CSS”

  1. Susan Cooper says:

    I can honestly say I haven’t done that. I hadn’t even thought about it. I can see why that may be something to pay attention to. When I do print it off, it will be interesting to see how it looks. I’ll let you know. :)

    • Leora Wenger says:

      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).

  2. Jeri says:

    My blog’s pages seem to print fine, except for one annoyance. I’ve often wondered if there is a way to keep photos from being printed across two pages when printed in IE. Is this something that would help with at or it the photo splitting caused by something else?

    • Leora Wenger says:

      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?

  3. Leora — I use “Print Friendly” which is under my blog posts. If someone wants to print a page they can and it is reformatted for printing. You can even eliminate the image.You know me. I don’t fool with HTML if I can help it!

  4. Like Jeannette, I prefer to use a plugin. Not that I’m afraid to get knee-deep in code, I just find that usually there’s already a WP plugin for whatever I’m trying to do, and they tend to work well, update as needed/as WP updates, etc!

  5. 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! :)

    • Leora Wenger says:

      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.

  6. Great information Leora. I did not know this and have always been frustrated by the numerous pages that would print out when I wanted to print out one web page.

  7. Susan Oakes says:

    I haven’t printed one of my pages yet Leora. I appreciate you giving the code as I would prefer to add code rather than have another plugin.

Leave a Reply