CSS is the webmaster’s best friend and allows you to change your website’s layout by editing just one file, but not only your website’s layout as it shows on your computer – also the way it shows when you print it! This is what this tutorial will cover.
A basic knowledge of CSS is necessary. See my Learning to use HTML well tutorial if you don’t know any CSS.
Media Types
CSS is not only for screen media. There are actually ten media types you can use! However, only two are fully supported, and these are screen and print.
To use a CSS media type, write @media and the media type immediately after. After writing this, use curly brackets to contain all the display information used with that media type. It works like this:
@media print {
/* display information for printing goes here */
}
If you use logical HTML (see my tutorial on logical HTML), you may have divided your page into navigation and content sections, using CSS to display them the right way, something like this:
<div class="navigation"> <!-- Navigation here --> </div> <div class="content"> <!-- Content here --> </div>You can take advantage of these good logical page divisions to make your page look very good when printed. You can exclude navigation from printing and make the content take up the whole width of the page. To do this, you can do something like this:
@media print {
.navigation {display:none;}
.content {width:100%;}
}
It’s quite easy really, but it’s easier if you have your page divided into sections with CSS and logical HTML.
This covers what you need to know, but if you’d like to know any more, drop a comment or post on the forums.
