Implementing a print stylesheet should be easy provided the screen CSS is in good shape. Using this site as the example, this article covers the steps to a successful implementation of a print stylesheet that will hide areas of the page not required when printing, leaving just the page content. The techniques discussed will work for a site without a CSS framework too. However, having a framework as a starting point probably makes implementing a print style easier.

Correct HTML syntax

For the style to work, correct syntax in the head area is essential:

<!-- PRINT STYLES -->
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

When using Wordpress insert <?php bloginfo(‘template_directory’); ?> in front of ‘css’.

Inspection of the code for this site reveals that styles.css calls a group of stylesheets that provide the screen styles. The same can be done for the print styles:

/* resets unwanted assumed values placed upon certain elements by certain browsers */
@import url("core/reset.css");

/* the basic structure of coulumn widths and gutters */
@import url("core/grid942.css");

/* basic formatting for horizontal and vertical list menus */
@import url("core/menu.css");

/* basic formatting for forms within the content area of the page */
@import url("core/forms.css");

/* definition lists */
@import url("core/definitionLists.css");

/* sets basic typographic styles */
@import url("fonts.css");

/* type sizes */
@import url("typesize.css");

/* type colours */
@import url("colours.css");

/* structural and typographical details specific to site */
@import url("details.css");

Of course, it would be possible to substitute any of the screen specific style sheets for print specific ones. However, something simpler works just as well. First add a declaration to hide the areas of the screen you don’t need. It’s essential that this is added after all the other CSS:

@media print
{
#mastHead, #footer, #sidebar, #breadcrumb, #pagination {
display: none;
}

}

CSS styled printed page

Make a test to see how the pages look when printed. Consider saving paper by printing to a pdf. In this case, the content fills the width of the page with no further CSS required (image left). Add any further adjustments either on a new style sheet, or at the bottom of the existing one. If many alterations are required then substituting some of the existing styesheets may be the best method.

Add the styles you do need

Any additional styles that are needed can be added in as shown below:

/* resets unwanted assumed values placed upon certain elements by certain browsers */
@media print
{
#mastHead, #footer, #sidebar, #breadcrumb, #pagination {
display: none;
}

#copy {
width: 90%;
margin: 0 15mm;
}

h1 {
font-size: 15pt;
}

p {
font-size: 10pt;
}

}

Example of what can be done with print styles

CSS printed receipt

Print styles can be really useful for situations beyond making a site look good when printed. They also come in handy when working on booking and ecommerce sites. The example here (image left) shows a printed out receipt page from an ecommerce site. The page had been structured using ordered and definition lists, which made this possible with relatively little work. There are of course other ways to output such information, such as Flash Paper.