AddThis Blog

Make Your Site Printer-friendly with CSS

As we found in Scott’s great post last week, printing is still a huge part of how people receive information on the Internet. And a little-known feature in CSS can help make your site look as good printed as it does on desktop or mobile browsers. That way you’ll ensure your visitors are happy printing good-looking coupons or PDFs!

media=”print”

The first step to making your site look great when it’s printed is to define a print stylesheet. There are two ways to do this. First, you can create a separate stylesheet with just the rules for printing the page, and specify it using the media="print" attribute:

<link rel="stylesheet" media="print" src="my_print_stylesheet.css" />

The other way to do it would be to specify print rules directly in the stylesheet, using the @media print group:

@media print {
    /* Print CSS rules go here */
    /* Note: You need a separate @media screen group for other rules */
}

Next Improvements

Now that you can tell visitors’ browsers how to print pages on your site, here are some tips for improving your site’s printed view:

With these strategies you can make sure that the users who are printing your page will get the best results with minimal hassle! Got any other tips you’d suggest?