Everybody knows that CSS is great for defining visual formatting and positioning on screen, but how many think of it as a useful way to define visual formatting and positioning for a printout? (Not as many!)

CSS can be used just as effectively to ensure nice, readable printouts of web pages, devoid of all the screen-specific garbage that you would expect to see on most websites!

Referring to an external css stylesheet is dead simple. We place the following code within the head section of documents we want to apply the stylesheet too.

e.g.
<link rel="stylesheet" type="text/css" href="path/to/file.css" />

The <link> tag also has an attribute called "media". Media can be a number of options, including screen and print. So if we want to establish a stylesheet for screen and one for print, we simply amend our code as follows:

<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" />

As you can see, we have defined a stylesheet now for screen and print media types. This will mean that when the page is requested from a web browser, the screen.css file will dictate the style of the page(s) and when printed or print previewed, the print.css file will dictate the style of the page.

However, this does not happen automatically, just by creating a printable stylesheet. Rules applied to selectors, classes and id's have to be setup according to the HTML on your page. The following example shows some code for a header section of a webpage. You might want the header of your page, which contains your logo and other graphics, to appear on screen but not when printed. A great way of doing this is to create a class or id called "header" and then define how you want it to appear in both stylesheets.

For example:

Firstly, in the stylesheet for displaying on screen...

div#header {
 font-family: verdana;
 margin: 4px 4px 4px 4px;
 font-size: large;
 font-weight: bold;
 background-color: #c0c0c0;
 border: #191170 2px solid;
}

...and then in the printable stylesheet

div#header {
 font-family: arial;
 font-weight: bold;
 font-size: 20px;
}

Effectively, what we are doing here is establishing rules for rendering a page on screen and rules for rendering a page for printing. The CSS example above defines a different font, margins, background colour and border for the header, but in the printable stylesheet you might want to adopt a different style, here we have left out a border and background colour and changed the font style and size.

Lets say you have a boxed area on your site which contains random banner rotations for advertisements. You will definitely want this to appear on screen, but for printing, its not really necessary and would be nice to leave out. This can easily be done with CSS as well, using 1 simple line of code. Suppose your adverts HTML looks like this:

<div class="banners"><img src="path/to/img.gif" alt="Free widgets, click here" /></div>

In your stylesheet for screen, you would add maybe border styles, background colour and positioning attributes, but when a page containing this element is printed you dont want it to appear, so in your printable stylesheet, place the following:

div.banners {
 display: none;
}

The code above will not render content that has that class assigned and it will dissapear when printed! Try it out - You'll be amazed how simple and easy it is to do.

That pretty much wraps up this short article on CSS and screen/print media types! Stay tuned for more CSS!

Go to: Home | CSS links | Discuss this article | Top