So you've followed the advice from CSS Help and made yourself a cutting-edge web page. What next? Well, maybe you want your visitors to be able to print pages in a certain style. Heavy graphical content can be removed, background color changed, and navigation items removed; in fact, anything to make a printer-friendly version of your page. All this can be done with CSS.
Printer-friendly pages with CSS
CSS can effectively be used to create formatted documents ready for print.
This is quite a simple process: we just need to create and attach a second style sheet with the attributes required for our print output. Therefore, we have a stylesheet that controls what you see on the screen, and another that controls what the printer is. Easy......
Markup changes
So, we will have already attached an external stylesheet in the head code of our document. It should look something like this:
<link rel="stylesheet" type="text/css" href="path/to/file.css" />
The <link> tag here has an attribute called media, which can have a variety of options such as screen or print. For a full description of media types, please view our glossary.
Now, if we want to separate our media into two types - one for the screen and one for print we must alter our code:
<link rel="stylesheet" type="text/css" href="path/to/screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="path/to/print.css" media="print"/>
We have now defined a separate style sheet for both screen and print.
The CSS sheets are now called screen.css and print.css. This means when a web browser requests your web page, screen.css kicks in for your screen display. When a request is made for a print preview or print, the style is defined by print.css.
This is not an automatic process, and we will have to write a new style sheet, print.css, that adheres to your original HTML document.
In the next section, we look at the CSS used to set up a page for print output.
CSS Changes
Let's now take a close look at the simple changes we need to make in our stylesheet and how we can create an individual print sheet.
Now is the time to define exactly what we want to achieve in our print output. Maybe we want our website header and logo to be appear on screen but be omitted on paper.
The easiest way to achieve this is to create a class or id called 'header' and define a different style for screen.css and print.css.
Let's have a look at how the code may look:
Your header id for screen.css may look like this:
#div header {
font-family:arial;
margin: 0px 0px 2px 2px;
font-size: large;
font-weight: bold;
background-colour: #000000;
border-colour: #ffffff 1px solid;
}
Your header id for print.css may look like this:
#div header {
font-family:arial;
font-size: 20px;
font-weight: bold;
}
The CSS code for screen.css defines font, margin, font size, font weight, background colour, and border colour.
The CSS code for print.css defines only the font, font size, and font weight. To save the visitor ink, we have omitted the background and border and reduced the font size.
If your site is heavy on animated banners or movies, we can apply a similar technique to show banners on the screen only.
Typical markup for you advertisment movies could be like this:
<div class="ads"><img src="path/to/img.gif" alt="CSS-Help T-Shirts, click here" /></div>
Your screen.css stylesheet could include a variety of attributes for the advertisement, such as border colour, drop shadows, and position.
In your print.css stylesheet, you would want to omit the advertisement from printing, so you would place the following:
#div.ads {
display:none;
}
This CSS code will eliminate the advertisement from the print output.
Final word
I hope this CSS tutorial is of benefit to you. Although it is only a simple example, there are many benefits of using different media types for alternative stylesheets. I hope to offer tutorials in these areas as I explore them.