Html and CSS:
CSS Print Media Tutorial by Karl Regis
Thursday, May 12, 2005 - 05:43 PM
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:
The 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:
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.
Note: 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.
