Cascading Style Sheets (CSS) is probably the best thing that ever happened to optimization, since ... well since the Internet happened!

The smaller the document size (read that as code size) in ratio to the content of the document the better off you'll be.

So what I just said is this; you want the engines to get to your content with as little code in the way as possible. Utilizing CSS you can move a lot of the code off of the web page and into a separate file. When the spider comes along and looks at your page, it doesn't display it like your browser does. The spider skips over the code looking for your content. Looking for the text and copy that makes up the message of your website. The less code there is the better.

Learn CSS and use it all the time. There is nothing that will help you more than utilizing CSS.

I am not going to try and teach you all about CSS here in this SEO tutor, but I would be doing you a disservice if I did not at least teach you the basics. So, for all intents and purposes, (no, the phrase really isn't intensive purposes) I will show you all you really need to know to utilize CSS and get all that code off of your pages.

A CSS file always has .css for an extension. A CSS file should hold all code specifications for any given web page. A CSS page has no HTML structure of its own. Here is a sample CSS file:

h1 {
font-size: 18px;
line-height: 18px;
font-family: "arial", "verdana", "geneva", sans-serif;
font-weight: bold;
text-align: left;
color: #3E534C;
}

div.seobody {
font-size: 14px;
line-height: 15px;
font-family: "arial", "verdana", "geneva", sans-serif;
font-weight: normal;
text-align: justify;
color: #000000;
}

a:link {
font-size: 11px;
line-height: 12px;
font-family: "arial", "verdana", "geneva", sans-serif;
font-weight: normal;
text-align: left;
color: #0000ff;
text-indent: 0em;
letter-spacing: 0pxs;
text-transform: None;
word-spacing: normal;
text-decoration: none;
}

That's it. A complete CSS file. Within it we have specified all the code needed for the H1 tag, that all important headline tag, and the main body content, here called seobody as well as a link. More on that below.

Font sizes can be specified in either point sizes or pixel sizes. I prefer pixel sizes, but you can do as you wish with that. To use a point size simply change the px to pt. The font is specific as arial and several other choices are given for those who for whatever reason do not have arial installed on their machine. Geneva is added as the Mac version of arial. Sans-serif is also used which will default to a sans-serif font, as what I want it to be is the sans-serif font. Serif and sans-serif are terms that go way back in printing, pre-press and typography industries. Sans is Latin and means without. Serif, also Latin, means lines of differing thickness, as in a serif type face like Times for example.

We use bold for boldface type in our heading, we align it left and we give it a color. Most of you are probably using Dreamweaver or FrontPage (gawd I hope not) to write and edit your web pages. These programs allow you to choose colors and will input the proper code here. There are many color charts online if you need to get one simply Google for it.

Let's hit on the variables for these design specifications. We already touched upon the font size as either pixels or points. Line height goes the same way, either pixels or points. Increasing this number above your point size will increase the space between lines of text. Decreasing, likewise, will decrease the amount of space between lines. Be careful not to set this so low that the lines all sit on top of each other.

Font weight is either normal, for the regular typeface weight, basically the body content type of weight. Bold is the other basic choice. CSS allows for using numbers here as well, but it isn't well supported in the browsers of today so let's just stick with normal and bold.

Text align allows you to align your content four different ways. Flush it left, right, center or have it justify evenly on both the left and right margins.

We show the CSS for a link above as well. Have a good look at that code. The CSS for a link is generally in four parts:

a:link.bod{
a:visited {
a:hover {
a:active {

When I first learned this, the instructor used the term Love Hate to help you remember each of the four link entities, i.e., link, visited, hover and active. LVHA, or love hate. It works as I always remember each of them when it comes time to set up my CSS and specify the code for links.

In the above example we have some more attributes to use. You can make each of the parts of the link the same if you like, then it will not change after you click on it, or during the click either. One nice effect can be achieved by making the hover be blue, and the active be red. Then when you hover over the link it lights up blue, and when you click it (make it active) it turns red. Neato I'd say! Often times the link is set to remain the same color even after you have clicked on it (visited) to keep the look of the page uniform. Changing the color to the standard red, or darker blue, allows you to see which links have been visited and which have not. Very useful.

Ok, we also have here text-indent which is designated here as 0 em spaces. What an earth is an em did I hear you say? An em is a space equal to the size of the capital letter in whatever particular font you are in. An en is exactly half that space. There are also em dashes and en dashes that can be used, which use the same sizing. The em dash (—) is a little bit longer than the en dash (–) the code for them is — and –. Back in the old days of printing and typography, the EM space was equal to the height of the capital letter, and the EN space was the size of the lowercase letter height. They were used as spaces, mainly to indent a paragraph. Often known as EM and EN spaces, or because they sound so similiar, Muts and Nuts ... but this has nothing to do with CSS now does it?

Letter spacing, is pretty plain and simple. Try it with a negative (-2) number. Geez, what fun. Text-transform, here set to none, can also be set to uppercase, lowercase, capitalize. Word spacing can be set to the space you want for word space, i.e., 30px or -0.5px. Experiment with these to really understand them.

Finally in our example is the text-decoration, set to none here it could be set to none, blink, line-through, overline or underline. The underline is probably what you'll use most often. I sometimes will set the visited or active link to underline. I like it when you hover over a link and it lights up and becomes underlined.

Of course this is CSS and we want to create a style for each link on the page. Seldom will we have the links in our navigation the same style as our links in our main body content. There may well be yet other links on the page which you will want to style differently also. For this we need to create separate styles for each one. It's simple. Here is how:

a:link.mainbody {
a:visited.mainbody {
a:hover.mainbody {
a:active.mainbody {

a:link.navleft {
a:visited.navleft {
a:hover.navleft {
a:active.navleft {

a:link.navbottom {
a:visited.navbottom {
a:hover.navbottom {
a:active.navbottom {

Of course we have left all the definitions off to save space. Each entry will contain the above items and end with the curly closing brace. Notice here we have the CSS now to define three different sets of links. One set for the mainbody of the page, one for the navigation in the left column, and one more for navigation along the bottom of the page. The bottom navigation is often used to get the links onto the page again, and also to change the keywords used to get to the other pages. This allows for more defined internal linking.