A print stylesheet will let your readers print a printer friendly version of your web pages to read off-line. Especially useful if your website contains a lot of information. They will not want to print out all the ads and banners, so here is an easy way to make get a print stylesheet to make your website printer friendly.
Print style sheet
A print stylesheet is simple because it only needs to express the differences between the printed page and the screen version. Mostly it is about setting some aspects of the screen display to ‘none’. Here is mine, copy it if you like.
You can see that the printed page does not display the header and other elements of the screen display. The .noprint helps me to choose other un-named elements of the content that I do not want to be printed. I wrap these unwanted elements in div tags with the class ‘noprint’.
/*start of print stylesheet*/
/* gives body white background, changes to serif font*/
body {
background: white;
font-size: 1em;
font-family:times;}
/*hides header, footer etc */
#header, #primary, #logo, #primary, #secondary, #footer, #nav-below, #nav-above, .entry-meta, #comments, .noprint{
display: none !important;}
/* resize logo*/
.entry-title {font-size:2em;}
/* speads content across the printed page*/
div#content {width:95%; margin:0 1em; padding:0}
/*removes decoration from links*/
a:link, a:visited {
color: #316dad;
background: transparent;
font-weight: normal;
text-decoration: none;}
/* end of print stylesheet*/
Save the style sheet as print.css and put it in the same folder as your stylesheet called style.css
Print command
All you need to do now, is put the print command on your pages. You can, of course change the text or replace it with a printer icon.
<a href="javascript:window.print()">Print a printer friendly version</a>
Refer to the print stylesheet in the head of your document
In the head of your document you will find a line that looks something like:
<link rel="stylesheet" type="text/css" media="screen" href="http://yoursite.com/style.css" />
Copy this line and paste it in below the original line and change it to look like this
<link rel="stylesheet" type="text/css" media="print" href="http://yoursite.com/print.css" />
Check it in your browser window
You do not need to print out sheets and sheets of paper as you adjust your stylesheet. You can just check it out by selecting Print Preview from your browser menu.
Yes, that is all, it is easier than you thought.
Tagged with: Design
Print
One Trackback
[...] eventually you will want to do something that you need to dip into code for. For example set up a Print Stylesheet. Here are some of the free web development tools that have made my ventures into web development [...]