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

If location and dimensions of boxes are properly worked out, they neatly fit into web page giving it a clean look. Since code associated with table designs are done away with, content of page attains more prominence in code. This makes it easier for search engine spiders to locate actual content of page.

If you have several web pages with similar design, CSS code with these and other details can be put in an external file. This will further shorten code for each page. With CSS lot many improvements can be done in web page design and layout. CSS can also be used for search engine optimization of page.

My experience with CSS has been great and I wonder why it is not used more often. My advice - convert to CSS based design.

Sanjay Johari contributes articles regularly to various ezines. His website contains information, articles, resources, opportunities and more for small business owners and home based business owners. http://www.sanjay-j.com