CSS Print Media Tutorial

Written by Karl Regis

Continued from page 1

CSS Changes Lets now take a close look atrepparttar simple changes we need to make in our stylesheet and how we can create an individual print sheet.

Now isrepparttar 105162 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 howrepparttar 105163 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 onlyrepparttar 105164 font, font size and font weight. To saverepparttar 105165 visitor ink we have omittedrepparttar 105166 background and border and reducesrepparttar 105167 font size.

If your site is heavy on animated banners or flash movies we can apply a similar technique to allowrepparttar 105168 banners to be shown onrepparttar 105169 screen only.

Typical markup for you advertisment movies could be like this:

CSS-Help T-Shirts, click here

Your screen.css stylesheet could contain all kinds of attributes forrepparttar 105170 advertisment such as border colour, drop shadows and position.

In your print.css stylesheet you would want to omitrepparttar 105171 advertisement from printing so in you would placerepparttar 105172 following:

#div.ads { display:none; }

This CSS code will illiminaterepparttar 105173 advertisement fromrepparttar 105174 print output.

Hope this helps:


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:


We welcome css tutorial submissions, css experiments and helpful advice.

Using CCS to Eliminate Tables

Written by Sanjay Johari

Continued from page 1

Ifrepparttar location and dimensions ofrepparttar 105156 boxes are properly worked out, they neatly fit intorepparttar 105157 web page giving it a clean look. Sincerepparttar 105158 code associated with table designs are done away with,repparttar 105159 content ofrepparttar 105160 page attains more prominence inrepparttar 105161 code. This makes it easier for search engine spiders to locaterepparttar 105162 actual content ofrepparttar 105163 page.

If you have several web pages with similar design,repparttar 105164 CSS code with these and other details can be put in an external file. This will further shortenrepparttar 105165 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 ofrepparttar 105166 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

Join the longest running internet business opportunity - because it works! http://www.sanjay-j.com/empowerism.html

    <Back to Page 1
ImproveHomeLife.com © 2005
Terms of Use