Keeping your pages clean of extraneous markup makes your pages easier to update, SEO friendly and WC3 compliant. Using the CSS approach, you separate the content from presentation. When you first begin to learn CSS, you may want to just declare simple rules for your web page such as background color, font size, and font colors. The more you learn the advanced techniques, you can begin to really take control of your layout such as eliminating tables, image effects and navigation tricks.

Whatever your goals are, CSS can really be a good tool to learn and master to make your XHTML more valid and adhere to web standards. Below I will demonstrate the basics of CSS to get you started and the advantages to creating valid and clean markup in your web pages.

First thing we need to do is create a CSS file. This file will contain all the markup and instructions our pages will need. This can be done using Dreamweaver or a text editor like notepad. Below I have written the beginning of a basic CSS file. I have declared the links and their different states as well as the body style. We start with type selectors and pseudo classes.

a:link { color: #0033FF; text-decoration: underline;
}
a:visited { color: #6633FF; text-decoration: underline;
}
a:hover { color: #6633FF;
}
a:active { color: #0033FF;
}
body { background-color: #00A3CC; font-family: Helvetica;
}

Now we have all our links and page background defined. Since this is just an introduction I will try to keep this simple. But just imagine how far you can take this if you want. Say you want to change all the links on your web site from blue to another color and remove the underline. This would take a long time to do. But with CSS its easy to just change one file. You can take it one step further and depending on the page, your body can be a different color.

Declaring the page ID allows you to tell the visitor what page they are on. You can make the navigation button highlighted for that page. Once you declare the body ID you have control over what different elements appear on different pages. If all your paragraphs are 12 pt Helvetica, its easy to give them a different style just on the homepage. To do this we create an advanced selector.

#homepage p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #993300;
}

Page title

Now we have our CSS file created, all we need to do it link it to our page. You can also link multiple CSS files if you want. Between the head tags link the CSS file and then declare the body ID.

As you can imagine, just these simple mark up instructions can have a powerful effect on your web sites and they grow. Changing just one line of a CSS file, you can change an element throughout hundreds of pages. CSS also allows your site to keep a similar uniform look across the entire web site. This has just been the beginning of what is possible with CSS. On your next web site, leave those font tags behind and explore the power of CSS.

Subscribe to my feed for more articles and tutorials.