CSS - Maximum benefits

Written by Zoran Makrevski

Continued from page 1

will help us to reduce file size, but that is notrepparttar only benefit. Using CSS word product in this example will be moved more close onrepparttar 105163 top of repparttar 105164 document. Search engine will pick up more content and less code.

Imagine that you have 3 columns table on your page. When you seerepparttar 105165 code, you will notice that first come code for your table, and after that it come your content. Positioning your 3 columns using CSS instead of standard inline elements:

<table width="90%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="381" height="150" valign="top" bgcolor="FFEDD4"> My Product </td> <td height="150" valign="top" bgcolor="FFEDD4"> ..

When CSS is used, your code might look like this:

<div id="leftcontent"> My Product </div>

Again your code is much more clear, and your content is moved onrepparttar 105166 top of your document, making your HTML page search engine friendly, and reducing your file size.

Content is one ofrepparttar 105167 most important factors in Search Engine Optimization, and you will benefit with removingrepparttar 105168 unnecessary code in your HTML and create search engine friendly web page.

Validate it Browser war is far behind us. Reality is that most ofrepparttar 105169 people today use Internet Explorer, but you should try to be on safe side and ensure that your CSS code is valid. Not all browsers interpret repparttar 105170 CSS on same way. You can validate your CSS here: http://jigsaw.w3.org/css-validator/

Zoran Makrevski Search Engine Positioning Firm SEO.Goto.gr

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.

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