Continued from page 1
CSS Changes Lets now take a close look at simple changes we need to make in our stylesheet and how we can create an individual print sheet.
Now is 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 create a class or id called 'header' and define a different style for screen.css and print.css.
Lets have a look at how 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 font, font size and font weight. To save visitor ink we have omitted background and border and reduces font size.
If your site is heavy on animated banners or flash movies we can apply a similar technique to allow banners to be shown on screen only.
Typical markup for you advertisment movies could be like this:
Your screen.css stylesheet could contain all kinds of attributes for advertisment such as border colour, drop shadows and position.
In your print.css stylesheet you would want to omit advertisement from printing so in you would place following:
#div.ads { display:none; }
This CSS code will illiminate advertisement from print output.
Hope this helps:
http://www.css-help.com
Karl Regis is a student studying Computer Science. He is continually developing a css tutorial website in order to gain a better understanding of cascading style sheets and pass this knowledge on to others.
Css Help is found here:
http://www.css-help.com
We welcome css tutorial submissions, css experiments and helpful advice.