There can be many reasons to print a copy of a web page – online billing, order confirmation, directions, applications, or a mailing list assembled from a database to name only a few. CSS (Cascading Style Sheets) allows a much better control of how the elements on the page will display when sent to the printer. It can be done with HTML alone, but every printer is different and errors could result if exact positioning is not specified using CSS

Print documents are much different than web page layouts. Here is some general advice, followed by a list of tutorial sources for more detailed instructions:

All header, footer and web graphics should be removed. Printer ink is expensive, and header and footer graphics often force a one-page document to print on two. Keep it as simple as possible for the customer. The only graphic that should remain on a print page is a small logo if appropriate. Web navigation and other page elements should also be removed as well as columns that have nothing to do with the document layout and web instructions like "How to print this document." Establishing a style that strips out everything but the document content by setting the display property to none can accomplish this.

Unless there is a compelling reason for a colored background, make it white with black text. It saves ink, prints much faster, and black ink is generally less expensive.

Set appropriate margins for a printed page. There should be at least a half-inch of white space, unless it's a dense-text document, like a contract, and you need to save space. Most modern printers will print nearly to the edge of the page, but it's more difficult to read.

Font size should be set no smaller than 10 point and no larger than 12, except for specific purposes, like large text for flyers or fine print for contracts. Font style should be serif, for example, Times New Roman. Sans-serif, like Arial or Verdana is easier to read on the web, but serif is better for print.

With CSS, it's possible to float elements as opposed to using absolute positioning, which will make it easier to line up divs, especially in a complicated arrangement like a bill or mailing label page. Absolute positioning for the main content container will ensure the margins are correct. Divs within the content area should float.

CSS for print tutorials:
Tutorial from Paul O'Brien
ProofPositive.com tutorial by Karl Regis
CSS Media styles on Javascriptkit.com
Advice from Tech-Evangelist.com
Printing the Web: Solutions and Techniques, an article in Smashing Magazine.
Print Friendly Web Pages at websitetips.com
The Power of Print + CSS at css-help.com
CSS: Going to Print by Eric Meyer for alistapart.com

CSS Tools:
CSS Validator at htmlhelp.com
CSS Validator w3schools.org
CSS Cleaner optimize your code to load cleaner and faster.
em calculator converts pixel sizes to ems
Css editor
CSS Font and Text Style Wizard
CSS Format generator
This tool from Oracle decodes the code and shows real English explanations for each element

Popular Searches