Let's assume that the Web pages you want to style for print contain elements that you don't want to appear on a printed page. What kinds of elements? Navigation menus, ads, graphical headings, and the like. You'll quickly learn to love the display: none property. display: none tells a CSS-capable browser not to render any element that it's applied to. So, if your Web site is designed with CSS and you have an area for your navigation menu defined as div#navBar, then in your print stylesheet or print section of your global stylesheet, you'd add the following definition:
div#navbar {display: none}
Apply display: none to every section of the page and/or every element that you don't want printed.
But what do you do if your pages aren't designed with CSS? Say, for example, you use tables for the layout of your Web pages? Here's a little trick that you can use. Tag each part of the table that you don't want printed with a class called .content, for example:
<td class="content">; ... your content here ... </td>
Then, in your print stylesheet or print section of your global stylesheet add the following CSS property:
.content {display: none}
The parts of the table that are tagged with .content won't appear when someone prints a page.
Note: Although I used .content to name that class, you can call it anything that's meaningful to you.
Adding Page Breaks
Web browsers don't add page breaks very well. If you've ever printed a Web page, you've probably seen (for example) a heading on the bottom of a page, and the text that goes with it on the next page. You can avoid this by using the following CSS property:
page-break-before: always
As you can probably guess from the name of the property, it adds a page break above the element to which it is applied. You'll want to use page-break-before: always sparingly. Most people I know who use the page-break-before: always property usually apply it to the <h2>element.
When you're testing your print-only pages, you may find that you need to force page breaks at certain point in a document. In the word processing world, these are called hard page breaks. To add a hard page break to any HTML element, just define this class in your stylesheet:
.breakPage {page-break-before: always}
Then, apply it a tag like this:
<p class="breakPage">... your content here ... </p>