A simple print style sheet for your website

Web pages do not always survive the trip to paper. Navigation, dark backgrounds, and interactive controls can waste ink or make the printed page hard to read.

One option is to load a separate print style sheet from the HTML <head>:

<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

If you want the main stylesheet to apply only on screen, give both links an explicit media type:

<link rel="stylesheet" media="screen" href="main.css" />
<link rel="stylesheet" media="print" href="print.css" />

For a small number of print changes, keeping them in the existing CSS file is often simpler:

/* on-screen styles */
@media screen {
  body {
    background: #000;
  }
}

/* print styles */
@media print {
  body {
    background: #fff;
  }
}

A real print style sheet will usually do a little more: hide navigation, remove decorative backgrounds, expand the content width, and make link URLs visible when that is useful. Start with the parts that look wrong in the browser’s print preview. There is no need to recreate the whole design on paper.

← Back to all articles