CSSRule: External Style Sheets and Search Engine Optimization

Thursday, July 16, 2009

External Style Sheets and Search Engine Optimization

There are three ways to apply CSS styles to a document. The standard and preferred way is linking to an external style sheet which is a file that contains the CSS rules and has a .css ending. The file is associated with the document using the <link> element in the <head> section of the markup. So to include an external CSS style sheet called "style1.css", you specify the file name in the href attribute. rel and type attributes are standard:

<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
...
</head>

An HTML document can reference more than one external style sheet. To include other files, add multiple link elements to the document head.

Embedded and inline styles are the two other methods of applying styles to a document. An inline style should only be used in rare cases when absolutely necessary because it mixes presentation with structure. Embedded styles are a step better than inline styles and are valid CSS but from a programmer's point of view, they are an unncessary burden.

To embed styles in a document, use the <style> element with the type attribute set to "text/css" inside the head and when you are done, close it off with a </style> end tag. The embedded styles allow you to quickly style your document without having to branch off to other files but for a price.

When you have embedded styles in multiple web pages, a global style change will involve every one of them whereas with an external style sheet, all of the styles being located in one place, maintenance will be snappy and much easier. And it turns out, there's yet another reason why you should link in your styles from external sources.

One of the things that you can help with search engine optimization (SEO) of your site is to use external CSS and Javascript whenever possible. Search engines give more weight to text that appears at the top of a web page than to text that appears further down. With a large embedded style sheet, your markup will be top heavy, pushing your keyword, and key phrase rich, relevant content that you want noticed by web crawlers far away from the top of your file ultimately effecting your site ranking.

Rankings are a lifeline for a web site so search engine optimization should be part of your development cycle during all of its stages.

1. External Style Sheet (Preferred)

<link href="style1.css" rel="stylesheet" type="text/css" />


2. Embedded Style Sheet 

<style type="text/css">
div {
font-family: 'Trebuchet MS',Verdana,Arial,sans-serif;
....

}
</style>


3. Inline Style (Non-standard and unnecessary)

<div style="font-family: 'Trebuchet MS',Verdana,Arial,sans-serif;">


4. Inline Style (Even though undesirable, in this case necessary 
in order to avoid hard coding **)

<div class="bargraph" style= "width: 438px;">