Creating a Print Style Sheet
I bet you want to learn how to put a "Print" button on your tutorial pages that will print out the page without navigation and irrelevant stuff in right column. Or better yet, when the user clicks FILE --> PRINT or click the print icon on their browser, it just prints all by itself without navigation, etc.
The trick to doing this is to add a line of code in your XHTML file, yeah, the one you can see with all the content, not the CSS stylesheet. It is:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
That's it. Now you have to create the file "print.css" -- here's how.
(1) Open up your main stylesheet, usually called "stylesheet.css" and go FILE --> SAVE AS --> and rename it print.css
(2) Now hide your navigation as it isn't useful in the print version of the document. For example, I name my left-hand column where my navigation is #leftnav -- you might have named yours #navigation. Whatever you named it go to this style and erase everything, yes, width, float, border, everything. Now add display:none; The finished code should look like:
#navigation { or whatever you call yours
display: none:
}
Now remove all the rules that apply to elements within the #navigation element. Yes, that's all those rules underneath it like: # navigation ul and #navigation h1 and #navigation p.
Now let's make our content area, or columnMain, or rightcolumn or whatever you called it wider, so that it takes up most of the available space. Find the section for the #content element in your style sheet. It will probably look something like:
#content {
margin-left: 260px;
margin-right: 150px;
}
Change it so you have a lot less space on the left and the right, remember, we are getting rid of the right and left columns. Make it:
#content {
margin-left: 20pt;
margin-right: 30pt;
}
Notice we change the web unit of measurement from pixels ("px") to the print unit of measurement points ("pt").
Lastly, if you have a right-hand column, be sure to change it to display:none. For example:
#rightColumn { or whatever you call yours
display: none:
}
And remove all the rules that apply to elements within the #navigation element. Yes, that's all those rules underneath it like: #rightColumn h1 and #rightColumn p (or whatever you have called yours) . In this example it will get rid of the babies picture.
Also, you probably want to get rid of the banner on top of your page. Again, it would be:
#banner { or whatever you call yours
display: none:
}
And again, get rid of any rule that apply to it (especially background graphics!).
Okay, all we have to do now is to format the text. We've probably picked a sans serif font for our main content column as it is considered easiest to read online. Try formating your text using these rules (yes, just copy and paste on the bottom of your print.css stylesheet).
#content p, #content li {
font: 12pt Arial, Helvetica, sans-serif;
}
#content p {
margin-left: 20pt;
}
#content h1, #content h2 {
font: 18pt Arial, Helvetica, sans-serif;
color: #000000;
background-color: transparent;
font-weight:bold;
}
#content h2 {
font: 14pt Arial, Helvetica, sans-serif;
padding-bottom: 2pt;
border-bottom: 1pt dotted #cccccc;
}
Now test it. Go FILE --> PREVIEW IN BROWSER and test it in at least Firefox and Explorer. If it doesn't look right check everything very carefully, especially the <link rel ...> and <link href...> tags in the header. If you are using a template (and I hope you are), then you probably need to go into your template(s) and change the <link rel ...> and <link href...> tags here, then go back to your page and go MODIFY --> TEMPLATES --> and apply the updated template to the page. Retest.
Another common error is naming your division <div id="..."> differently in the .html page and the print.css page. They must be exactly the same, and all lowercase with no spaces (dashes are fine).
If you still need help, try printing this page and see what it should look like (hey, no header, left-hand navigation or right-column babies). If you want to look at the code behind this page, look at:
printstylesheet.html
print.css
If you still have problems AND you are a former student, e-mail me.