SEO By The Page – 7. Cascading Style Sheets

This is not an article on using cascading style sheets (CSS) but rather how they impact search engine optimization (SEO) and what you should know in that regard. CSS is handled in three ways:

1. internal style sheet
2. linked (external) style sheet
3. in-line style attributes

The first places to cascading style sheet content between <style> ... </style> tags in the head section of the HTML/XHTML document (web page). This is the most common way for many single web pages, landing pages, and other small sites.

The second places the cascading style sheet content in a separate file and a link to that file is placed in the head section of the HTML/XHTML document. This external style sheet can contain style information used by a single web page or across many pages of a large website. It may even be used for multiple website and means that only one file needs to be changed in order to affect the style elements of any web pages that reference it.

The third places the individual style elements as an attribute into the HTML tag surrounding the content to which the style applies. This is very useful for sites where you need to insert content into an existing web page (such as a listing template on a selling site) and where you do not have access to the head section of that page.

One of the important aspects of SEO is getting your relevant, indexable, content as close to the top of the page as possible. This means the less you can put in the head section of the page the closer the body section, containing most of your content, is to the top of the page and, therefore, more of it is likely to be indexed. Long cascading style sheets push this valuable content many extra lines down in the page code potentially reducing the amount that may be indexed.

Using the linked external style sheet reduces the long body of CSS code to a single line, something like this:

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

Note that the link tag is a single stand-alone tag with no associated closing tag and is, therefore, closed with a trailing slash before the closing bracket.

Using linked external style sheets can improve your SEO efforts significantly.