The power of print + CSS So you've made yourself a cutting edgeweb page. What next ? Well maybe you want your visitors to beable to print pages in a certain style. Heavy graphical contentcan be removed, background colour changed and navigation itemsremoved, infact anything to make a printer friendly version ofyour page. All this can de done with CSS.
Printer friendly pages with CSS CSS can effectively be used tocreate formated documents ready for print. This is quite asimple process and all we have to do is create and attach asecond style sheet with the attributes required for our printoutput. Therefore we have a stylesheet that controlls what yousee on the screen and a style sheet that controls what isprinter. Easy......
Markup changes So, we will have already attached an externalstylesheet in the head code of our document. It should looksomething like this:
The tag here has an attribute called media which can havea variety of options such as screen or print. For a fulldescription of media types please view our glossary here.
Now, if we want to separate our media into two types - one forthe screen and one for print we must alter our code:
We have now defined a separate style sheet for both screen andprint.
The css sheets are now called screen.css and print.css. Thismeans when a web browser requests your web page screen.css kicksin for your screen display. When a request is made for a printpreview or print the style is defined by print.css.
This is not an automatic process and we will have to write a newstyle sheet called print.css that works in accordance with youroriginal html document.
In the next section we look at the CSS involved in setting up apage for print output.
CSS Changes Lets now take a close look at the simple changes weneed to make in our stylesheet and how we can create anindividual print sheet.
Now is the time to define exactly what we want to achieve in ourprint output. Maybe we want our website header and logo to beappear on screen but be omitted on paper.
The easiest way to achieve this is create a class or id called'header' and define a different style for screen.css andprint.css.
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 andfont weight. To save the visitor ink we have omitted thebackground and border and reduces the font size.
If your site is heavy on animated banners or flash movies we canapply a similar technique to allow the banners to be shown onthe screen only.
Typical markup for you advertisment movies could be like this:
Your screen.css stylesheet could contain all kinds of attributesfor the advertisment such as border colour, drop shadows andposition.
In your print.css stylesheet you would want to omit theadvertisement from printing so in you would place the following:
#div.ads { display:none; }
This CSS code will illiminate the advertisement from the printoutput.
