Print Stylesheet - The Definitive Guide
By Trenton Moss2008-01-24
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:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
