Print Stylesheet - The Definitive Guide

By Trenton Moss
2008-01-24


Making the print stylesheet

When making the print stylesheet place the print CSS commands into the bottom of your main CSS file. As you keep adding more commands check how your web pages look on the computer screen (don't do this on a live website!). Keep adding commands until you're happy with the appearance, then cut these commands out of the main CSS file and paste into the print stylesheet.

To summarise, your print stylesheet may look similar to this:

/* Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}


You've now got a print stylesheet! For something this quick and easy to set up that improves usability as much as it does, you'd be mad not to use one!

Tutorial Pages:
» Introduction
» How to set up your print stylesheet
» What to put in your print stylesheet
» Making the print stylesheet

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS » Cascading Style Sheets - CSS

Recent Comments

ryanhellyer January 24, 2008, 11:38 pm Not using print style sheets is just lazy. Mobile style sheets are a good idea too. Print style sheets don't need to be fancy either, just removing coloured backgrounds usually does the job.

Read all comments

Account Login Required to Post Tutorial Comments Username: Password:   Signup Free! | Forgotten Password