CSS Print Media Tutorial

Written 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 withrepparttar attributes required for our print output. Therefore we have a stylesheet that controlls what you see onrepparttar 105162 screen and a style sheet that controls what is printer. Easy......

Markup changes So, we will have already attached an external stylesheet inrepparttar 105163 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 forrepparttar 105164 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 printrepparttar 105165 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.

Inrepparttar 105166 next section we look atrepparttar 105167 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 inrepparttar 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 featuresrepparttar 105156 design became more and more complicated resulting in longer loading times. It also took lot of time to "adjust"repparttar 105157 tables onrepparttar 105158 page to make it acceptable.

It was not an easy task to redesign allrepparttar 105159 pages using CSS. But once I started,repparttar 105160 improvements were more than I had bargained for. The design became simpler,repparttar 105161 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 changerepparttar 105162 appearance but to makerepparttar 105163 design simpler. Nowrepparttar 105164 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 ofrepparttar 105165 "box" can include size, its location on web page, background color and image if any, font details, padding, border details etc. The location ofrepparttar 105166 "box" can be made "fixed" onrepparttar 105167 web page, or it can be floating in which case location can be defined with respect to another "box".

Cont'd on page 2 ==>
ImproveHomeLife.com © 2005
Terms of Use