Cascading Style Sheets: Printing styles

Often, you’ll want different styles for printing than for display on a computer screen. There are many different places your page can “display”, and you can have different styles for each of them.

At the top of this page, in the head section of the HTML, we have:

<link rel="StyleSheet" href="reviews.css" type="text/css" media="all" />

Add a new line immediately after this and change the “all” to “print”, and the “reviews.css” to “print.css”:

<link rel="StyleSheet" href="print.css" type="text/css" media="print" />

You can use this to hide (display: none) items that are pointless to print. For example, navigation menus are often set to not print. They waste space on the paper, since you can’t click on links on paper.

ul#menu {

display: none;

}

In our case, we have a wide left margin. We can reduce that margin on printing by putting the following as our print.css file:

body {

margin-left: 0;

width: 90%;

border-style: none;

}

This will also remove the border on the left side of the page.

When printing our page out, people cannot click on the links: there isn’t anything to click on paper. But we can display the URL of links when printing. To your print.css, add:

dt a:after {

content: " (" attr(href) ")";

}

This takes the text of the href attribute of the link in question, and places that as the content after the link. You will now see, on printing, the URL in parentheses after each link that is in a definition term. You will also notice that the definition terms are horribly justified! This is because the URL is generally quite long, and we earlier specified that all text on our page is justified. Add the following snippet to de-justify dt text:

dt {

text-align: left;

}