This week I have been working on an interesting tool that enables the users to print the output. Introducing the print style sheet. Most people assume that printing web pages is a simple task , but when they come to print the page they might find table cells printing across pages or print margins skewing the design of the sites layout. This is where the print style sheet comes in.

If you are producing content that users are likely to print such as graphs, research articles or data, you will need to include a print style sheet to your page, to do this create a style sheet file and include the following line to your site.

<link rel="stylesheet" href="printstyle.css" type="text/css" media="print" />

This link is ultimately is the same as a standard css link apart from the media=”print” which tells the browser to only use this stylesheet when printing.

The print style sheet is used to override styling already in your default style sheet, you wont need to replicate your style sheet just let the browser know which elements you want to change for print. Now you can start to style how your site looks on paper.

Here are a few handy lines to get your stylesheet started:

width: 100%; margin: 0; float: none;

This will ensure you remove annoying borders and increase the space on your page.

a:link, a:visited
{
color: #000

text-decoration: none;

}

The above code is used to make links on the page black , this can be handy for research documents or articles keeping the link colour the same as the text body.

#element {
	page-break-before: always;
}

This code can be used to ensure there is a page break before an element handy for having only one title per page for example.

Bookmark It

Hide Sites