CSS Print Media Tutorial by Karl Regis
The power of print + CSS So you've 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 colour changed and
navigation items removed, infact anything to make a printer friendly version of
your page. All this can de done with CSS.
Printer friendly pages with CSS CSS can effectively be used to create formated
documents ready for print. This is quite a simple process and all we have to do
is create and attach a second style sheet with the attributes required for our
print output. Therefore we have a stylesheet that controlls what you see on the
screen and a style sheet that controls what is printer. 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 here.
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
called print.css that works in accordance with your original html document.
In the next section we look at the CSS involved in setting up a page for print
output.
CSS Changes Lets 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 create a class or id called 'header' and
define a different style for screen.css and print.css.
Lets 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 reduces the
font size.
If your site is heavy on animated banners or flash movies we can apply a
similar technique to allow the banners to be shown 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 contain all kinds of attributes for the
advertisment such as border colour, drop shadows and position.
In your print.css stylesheet you would want to omit the advertisement from
printing so in you would place the following:
#div.ads { display:none; }
This CSS code will illiminate the advertisement from the print output.
Hope this helps:
http://www.css-help.com
About the Author
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.
|
