Printing

Go ahead, preview this page for printing. Go to File-Print Preview or whatever your browser uses to show you what the page will look like when you print it out. Don't worry, I'll wait for you...............

It looks like a completly different page doesn't it? The only thing left is the content you're reading now. Why did I make everything else go bye bye? To save you ink not having to needlessly print out the same stuff, the stuff that just doesn't matter, over and over again. Pretty considerate of me to do this for you especially since I know you've probably printed just about every page in this tutorial to create your own little book of it, right? Right.

Other things you may want to consider are that larger, sans-serif fonts are easier to read on a screen and serif fonts are easier to read on printed pages and can be smaller. I could have also made it so that the content better fit the printed page without such a large right or left margin. The reason I didn't do this or change the font was because much of the content is dependent on the width of the colomn it's in for proper display of my examples given in this tuttorial.

Now how you set up different styles for printing as opposed to what you see on the computer screen is through the use of media types. The two we're interested in here are the screen and the print media types. There are others, such as aural, but they aren't widely supported by browsers yet and this is about printing, so we'll ignore them.

Now the codes shown above can be used in either embeded or external file sheets. By using the media types as shown above, you can declare all your styles for both screen and print in one document. Notice that all the style declarations for either type are enclosed in curly braces seperate from those for the different style rules. In short, the style rules are nested within the media declerations. This is all fine and good, but, if you like you can also have two seperate external file sheets linked to your pages to help keep things seperated and less confusing.

By declaring the media type, media="print" or media="screen" in the link itself, you don't have to bother with any further media declarations in the style sheets themselves. Your browser will automatically use the proper style sheet for its intended purpose.

Now pretty much every style property and value we've shown you in this tutorial can be used with print styles, the two you will probably use a lot are visibility:hidden; and display:none;. Remember that visibility will hide things that you don't want printed, but still keep a space for it. The display property will also hide things but will not maintain its space allowing other things to fill it in. For my print style sheet, I used a combination of both of these to maintain my left and right margins but get rid of my headers and footers.

Now about the only thing left regarding printing that you may want to know is how to let the browser know when to stop printing content on one page and continue on the next. Normally this will be done when there's enough content to fill one page. But maybe your page is sectional and better printed that way. If so all you need to do is insert on of the following codes in a tag in your page.

Using either of the style declarations shown above will produce a page break before or after the tag it's used in. Note that it doesn't have to be used in a <span></span> tag. It can be used in just about any tag you wish, such as the header tag that starts each section you would like printed on it's own page.

That's pretty much it for printing. The only thing left is for you to practice at it a bit, but you've been doing that all along in this tutorial with the template I provided earlier, right? Right! Now on to the last thing, scroll bars.