This explains some basic ideas for quickly creating a set of print styles using the CSS3 @media syntax.

Granted, many of us now neglect print styles altogether. However, it takes relatively little effort to create something simple that can save users printing all the things from a page they probably don’t need. I’ve recently added some print styles for this site, so hope these may be of use to others:

First off, these styles are best placed at the end of all your other styles. This means they are given greater weight due to the CSS cascade and less likely to be over-written by other rules elsewhere.

First off, using CSS3 media queries, we can target styles for print like this:


@media print {
 /* styles go here */
}

First off, I wanted to ‘switch off’ all the elements that weren’t relevant to a print out. I just used Firebug/Developer tools to choose the elements in my layout I deemed unnecessary for a print out: header and navigation, user comments, sidebar etc. That would give you something like this:


@media print {
    aside#sidebar,header[role="banner"],footer,#comments,#respond {
        display: none;
    }
}   

Next up, we can add a 100% (or your preference) width to the main content of the page and remove any padding and margin:


#container #content #main {
    width: 90%;
    margin: 0px;
    padding: 0px;
}

Then set things high contrast. Most printing is black and white so here I’m attempting to make all backgrounds white and all content black. You can also use the universal * selector to remove any other extraneous presentational details (box-shadows, text-shadows, borders etc). I was using Sass/Compass but if you’re writing vanilla CSS, just add it in there in the usual way with any relevant vendor-prefixes. Something like this:


* {
    color: #000;    
    background-color: #fff;
    @include box-shadow(none);
    @include text-shadow(none);
}

Finally, any links that are just hyperlinked words aren’t going to be much use on a print-out, so we can use the :before or :after (note, CSS3 request these pseudo classes to be written as ::before and ::after but IE8 and below don’t understand that) to display the href="" link afterwards on the printout so people know where the link goes. For example:


a:after {
    content: "( "attr(href)" )"
}

So, all together, you print specific styles might look something like this:


@media print {
    aside#sidebar,header[role="banner"],footer,#comments,#respond {
        display: none;
    }
    #container #content #main {
        width: 90%;
        margin: 0px;
        padding: 0px;
    }
    * {
        color: #000;    
        background-color: #fff;
        @include box-shadow(none);
        @include text-shadow(none);
    }
    a:after {
        content: "( "attr(href)" )";
    }
}

Obviously, this isn’t exhaustive, you may want to use different fonts, alter line-height etc but hopefully this helps get things started.

[update 24/04/2012] – just remembered there’s a very thorough set of print styles defined in the HTML5 Boilerplate CSS. If you don’t want to ‘roll your own’, head over there and grab the relevant section and amend to suit!

My latest book, 'Enduring CSS' is out now

Get $5 off HERE ↠

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp