Glendelm Web Design - CSS Tips

I've seen so many cases where people's beautiful HTML pages are unfortunately ruined by poor CSS coding. In most cases, although it gets the job done, it's nearly always scruffy, deprecated or not SEO friendly.

So, today I'm going to give you a few tips on how to keep your CSS neat, tidy and Google-friendly.

First of all, always keep your CSS in an external stylesheet, and link it using the <link> tag, it means that Search Engines don't have to trawl through pages of irrelevant CSS and they can just get straight to the content, giving you a higher page-rank - something that I'm sure would benefit most of us.
Use class and id correctly, putting the '.' or '#' infront of the name of the style. Try and limit how many different styles you use. For example, if you have three identical divs on the page, instead of having div 1, div 2, and div 3, give them all the same style and just position them differently. This reduces the size of your CSS file, making the page faster loading, and keeping your page tidier.
Always seperate different styles with a new line. It becomes very hard to differentiate between the different styles if they are all on one big line. Whether or not you put each element of the style on a new line is up to you, but do make sure that they are all nicely spaced and seperated. For a better idea of what I mean, check the examples down at the bottom of the article.
Ensure that you are always using the latest versions of the different attributes. Try not to use any that have been superseeded by newer versions. You run the risk of your page not displaying correctly in certain browsers, and Search Engines are not fond of deprecated code.
Last, but not least, only have one stylesheet. I've often seen people have a new stylesheet for each page. This is not advised, and hardly ever done. It makes it much harder for you and the browser. Having one stylesheet means that the viewer only has to download it once, and then they have the styles for all of the pages, meaning that everything is smoother and loads quicker. If you have multiple sheets, not only does it increase the risk of broken links, but it means that the visitor has download a new one every time they visit a new page.

Examples

Without new lines:

#blah {width:800px; height:800px; margin-left:200px;}

.blah2 {width:801px; height:801px; margin-left:201px;}

With new lines:

#blah {

width:800px;

height:800px;

margin-left:200px;

}

.blah2 {

width:801px;