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 attributes required for our print output. Therefore we have a stylesheet that controlls what you see on screen and a style sheet that controls what is printer. Easy......
Markup changes So, we will have already attached an external stylesheet in 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 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 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 next section we look at CSS involved in setting up a page for print output.
Using CCS to Eliminate Tables
Written by Sanjay Johari
CSS or Cascading Style Sheets has opened up tremendous possibilities for improving web site designs, web page layouts and adding new features. The HTML code can be made shorter, cleaner and simpler by CSS resulting in faster loading of web pages, and making them more accessible to search engines. Here I am narrating my experience with only one part of CSS - using it to eliminate tables.
If you look at a traditionally designed web page, you are likely to find number of tables in layout. Tables were earlier used only for displaying information in a tabular form. But web site designers soon started using tables for other applications such as showing images, graphics and other decorations.
My own web pages were earlier checkerboards of tables. Each web page was almost fully covered with tables and many tables were nested inside other tables. As I tried to add more features design became more and more complicated resulting in longer loading times. It also took lot of time to "adjust" tables on page to make it acceptable.
It was not an easy task to redesign all pages using CSS. But once I started, improvements were more than I had bargained for. The design became simpler, appearance improved and loading time came down considerably. The code looked real clean. Most of "td" and "tr" tags were gone.
My purpose of this exercise was not really to change appearance but to make design simpler. Now tables which were earlier used only for design purpose have been eliminated. For eliminating tables first step is to decide which tables or more specifically which cells have to be removed. For applying CSS each cell of a table can be considered as a "box". These boxes are given separate identities and description of each "box" goes into CSS code. The "boxes" can be given names such as box1, box2 etc. The description of "box" can include size, its location on web page, background color and image if any, font details, padding, border details etc. The location of "box" can be made "fixed" on web page, or it can be floating in which case location can be defined with respect to another "box".
attributes required for our print output. Therefore we have a stylesheet that controlls what you see on