Print CSS is a Cascading Style Sheet intended for print documents when users want to print the web page for reference. It applies to document view in print preview mode as well, therefore you can preview how the print document looks like after you have made amendment on your Print CSS.

Live Demo: Menu Bar -> File -> Print Preview or Alt + F then V.
View Full Print StyleSheet

What happen if there is no Print CSS for the web page?

Below is the example of OXP without a Print CSS. You might want to check out other web pages by going to the Menu Bar -> File -> Print Preview to preview the print web page. Most of the web pages do not have a Print CSS, therefore you can see that the alignment, layout, colour and font are all in their default.

So how does it look like after adding the Print CSS?

Well, styling Print CSS is the same as styling a normal StyleSheet, you can make any changes you prefer. Thus, it's definitely going to look better, the formatting and alignments become neater, users will be able to read and print easily. Below is how it looks like after applying the Print CSS.

Below will be a tutorial showing you how to get started by doing one Print CSS for your web page.

Include Your Print CSS At the Head Tag

Simply include your print.css at the Head of your web page.. Note that the media is now set to print and not screen.

<!-- Include Print CSS -->
<link rel="stylesheet" href="URL to your print.css" type="text/css" media="print" />

Print StyleSheet

Now we move to the Print StyleSheet, writing a Print CSS is the same as writing normal CSS. Below are just some of the few important pointers to take note, the rest of the styling are as usual.

Reset the Style
You will need to do a reset for all the padding, margin to default even you already did it for your main web page CSS. Next, you will also need to declare the fonts that you think that will look good in the printed document in the body.

/*Reset Style*/
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Remove Extra Element
There are elements that is not needed to be on the print document, like the Search bar, Sidebar, Sponsor, Social Bookmarking in the single post and so on. Therefore we can just remove all these elements, by declaring display: none; in the CSS.

/*Remove Element*/
#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social, #sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs, .postmeta-content .comments, #respond h3, .tag, .footerlinks {display:none;}

Display URL in Print Document
On web page, you will be able to click on link if there is an URL. However for printed document, user cannot click on the link, so we will need to show them the URL so that the user can know that is a link and go to that page.

/* Show URL */
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}
a[href^="http://"] {color:#000;}

Give a Page Break
For example, your user only want to print the content but not the comments in a single post view. What you can do is by declaring page-break-before: always; in the CSS, it will push that section to a new page.

/*Break Page*/
#comments {page-break-before: always;}

Live Demo: Menu Bar -> File -> Print Preview or Alt + F then V.
View Full Print StyleSheet

If your web page does not have a Print CSS, why not try doing one now! If you have any other Print CSS information or technique to share, please go ahead and leave your comments below.