I love CSS, because I hate font tags in my html, and I truly despise tables. Iām a very organized person, and everything has to be in its place; so when my code is all untidy, it makes me uneasy. It makes me feel the same as when I have a lot of junk mail piled up all over the office, or when itās time to clean out the garage.
There are actually many reasons while I like external style sheets so much. Part of effective SEO contains the following elements that can be addressed by utilizing external style sheets: maintaining a good content to code ratio, using lots of relevant content, and filling the page with as much text and links as you can without spamming the search engine spiders.
Before I enumerate the ways CSS is beneficial in search engine optimization, understanding a little bit about what a search engine spider sees when scanning a page is important. Search engines read pages like you and I do, from top to bottom. It also assumes that the content near the top of the page is more important than the content at the bottom of the page. The text at the top of a page receives more weight than the text at the bottom.
Iām not going to cover the basics of XHTML (Extensible HyperText Markup Language) or CSS, because thatās not what this article is about. Iām going to assume that you have at least a rudimentary knowledge of CSS and XHTML. If not, there are hundreds of helpful CSS tutorials on the internet. One particularly good set of tutorials on CSS is Cascading Style Sheets in Dev Articles.
Another website to start learning about CSS is the place where it all came about: The World Wide Web Consortium, or the W3C. Learn about XHMTL also at W3Cās website. Their tutorials will help you understand and recognize the difference between HTML and XHTML. For all intents and purposes, you donāt need to know much about CSS for this article to make some sense to you, although it will be extremely helpful.
So why use CSS? Here are several ways that will help you understand how CSS is an appropriate SEO tool.
1. Pages Load Faster
Web pages designed with CSS are much smaller in size than pages designed solely in HTML. Smaller pages load faster because there is less overall text to be rendered in a browser, and also less code for a search engine spider to trudge through.
Letās take for example two web pages that were designed differently, but look identical to the human eye. One was designed completely in HTML, the other in CSS and XHTML. The pages have the same content, the same images, and the same elements. The HTML page is 39 kilobytes, while the web page designed with an external style sheet is only 8 kilobytes. By eliminating font, table, and other tags in the HTML, we saved 31 kilobytes in the page that utilizes CSS. Page load times for the HTML page are close to one minute with a 56.6K modem; whereas, the page with the style sheet loads in just a few seconds.
Overly heavy pages are not as effective in search marketing as light pages. Less HTML will improve how well the search engine can parse the page, and return it in the SERPs (search engine results pages) when a visitor makes a search engine query.
Search engine spiders are very simple animals, so to speak, and generally fairly standards-dependent. They need standards-compliant code in order to access all areas of a website. Since font tags are deprecated, it makes sense not to include them in your HTML, which will make for a smaller file.
2. Accommodates Accessibility
CSS is very friendly to accessibility readers. Not everyone views web pages in browsers like Internet Explorer or Mozillaās Firefox. People who are visually impaired or have other disabilities use accessibility readers. Accessibility readers are tools that read code for the viewer and translates HTML into audio, extra large text, or other formats that just strips out all the html tags.
Content in pure HTML is not organized in such a way, referred to as the ācode flowā, that if all the tags were removed, (as they would be if HTML is translated into audio or text), there would be no logic to the content, especially if the HTML was designed poorly or with a lot of tables, and the visitor could make little sense of the content.
āIt is important to remember that accessibility tools can only partially check accessibility through automation. All accessibility tools scan the source code of a web page using interpretations of either the United States Rehabilitation Act Section 508 standards and/or the World Wide Web Consortium’s Web Content Accessibility Guidelines 1.0 (WCAG). Of the sixteen standards in Section 508, only seven standards can be partially evaluated automatically; similarly, of the combined 65 checkpoints in WCAG 1.0 Priority 1 through Priority 3, only nineteen can be partially evaluated automatically.ā ***
Just as when writing an article in Word, I donāt always accept some grammar and spelling checks by the program, because these sometimes require human judgment to determine if corrections should be made.
If human judgment is required during scans of HTML with accessibility tools, then having to reorganize the content of the page, so that the code flow is in a logical order, will take quite a bit of time. Using CSS with HTML properly would ensure that stripping out HTML tags would be unnecessary, and eliminate the need to reorganize the content for readability.
3. Easier to Read Content for Spiders
Search engine spiders are also affected when content is difficult to read. When a spider finds a page that is well organized and not filled with a lot of extra HTML code, it can ascertain quickly and accurately what that page is about. This can certainly improve your search engine ranking.
Contrary to popular belief, search engine spiders donāt completely ignore HTML code. Rather, it weighs certain elements of content on a web page by how they are represented in the HTML.
The best way to start optimizing a web site is to make sure that all the code is readable. If there is too much unnecessary text in your HTML, it is difficult for spiders to decide that a page is relevant to a particular search query. Improving your structural organization will not only make it easier to read for visitors, but ensure that search engine spiders understand what is being displayed.
Letās use this example. Instead of placing this in your HTML code:
<strong><font face=”Arial” color=”#FF0000″ size=”24px”>Search Engine Optimization and CSS</font></strong>
Use this in XHTML:
<h1>Search Engine Optimization and CSS</h1>
And this in your CSS:
Using XHTML to declare your main heading as h1 will ensure that a search engine spider knows that the contained text is a title or sub-heading of the page, while styling it with CSS yields the desired design effect. Using header tags accordingly, SEO’s can use this ideally to style the sub-headings on a website and clue in search engine spiders of their importance, especially when those sub-headings contain keywords. Header tags <h1> through <h6> tags seem to be given more weight than regular text. This is why even though our first example will look exactly the same as the second example visually to the human eye; to a search engine spider, the first example looks like regular text to it; whereas, the text contained in the <h1> and </h1> tags alerts the spider to the importance of the text as a sub-heading.
Most popular search engines, such as Google, MSN, and Yahoo, look for any intention to display one set of keyword-rich, yet hard-to-read, text to search engines, and another, more people-friendly version of the content to humans. When search engines detect this type of behavior, called cloaking, it is perceived as search engine spam, and they can penalize or even ban your site. While the belief is that search engines disregard an external style sheet, it is still important not to use CSS to spam the search engines. Content goes in HTML, whereas presentation elements should go in the CSS file, and thatās all.
4. Tables Cause Problems
When a search engine spider scans a webpage with tables, it sees a lot of <tr> and <td> tags, as well as cell sizes, row widths, border colors and other information that is purely irrelevant to your spiderable content. Most spiders strip out these tags or simply ignore them, but it takes longer to get to the actual content, forcing the search engine spider to sort through the code.
It takes longer for a browser to parse a document filled with tables, also. Browsers operate in an āinside outā fashion. When HTML is rendered in a web browser, it has to find the inner-most table and work outwards. If there are many nested tables, parsing the page, then rendering it to the visitor could take a long time.
Nested tables are especially heinous to accessibility readers, and it is in these cases where content does not follow the code flow of the document, and could make absolutely no sense when being read by accessibility tools.
From a search engine standpoint, having to wade through all the code that comprises tables before it gets to the real content, reduces the pageās ability of being matched with search engine queries, or even indexed. This adversely affects the siteās probability of ranking well during the course of a search engine query.
5. Code Positioning
With CSS, your important content can easily be placed at the top of the HTML code, right under the <body> tag, if the CSS is done correctly. In a web page that uses tables, content is shown in the order the tables are shown, and always below a bunch of meaningless tags to a search engine spider. If you have many cells, rows or columns, your important content may end up way down in the bottom of the HTML code, while unimportant items, like navigation menus and banners could end up at the top of the page.
With CSS, you can format your divisions in such a way that it doesnāt matter where in the XHTML code the divisions are listed. The content will still display in the same way. Therefore, you can move the items such as navigation, banners, and even images, to the bottom of your code without losing your visual styling.
An <h1> tag placed directly after the <body> tag will be weighted heavily by many search engines, especially if it contains one or two of your keywords. So like we showed in the example above, instead of the just altering your font tags to show large text so that it looks like a headline, the second example would be far more search engine friendly.
You can also place images in your CSS as division backgrounds to free up page size, as well as eliminate the need for image tags in your HTML.
6. Simplifies Updates
This actually may mean more to the webmaster, but it has value for the SEO professional as well. If content is easier to access, chances are it will be updated more frequently. Updated content adds freshness to the pages of the website, and freshness is important to search engines.
Along the same lines, when colors or fonts need to be changed, they only need to be altered once in the CSS code, versus revised in every HTML page. And while this holds little real SEO value directly, it is worth mentioning, because indirectly, it allows more time for the webmaster to add or update the important things to his site, such as content and headlines.
7. HTML Code Should Be Tidy
I mentioned this early on in the article, because it is a pet peeve of mine. I keep a page from one of my early websites around for laughs. The code is so awful, I still canāt make heads or tails of all the font, borders, table, and form tags, and it is 62 kilobytes in size. More than just a personal preference, clear cut HTML makes for easier development for the next web designer, or to make changes to content. Being able to find your way around someone elseās code is important to new inductees having to look at a page for the first time. Being able to find their way around makes it easier for proofreading, editing, updating content, and fixing site issues that may prevent spidering or ranking well.
A site designed properly with CSS and XHTML can avoid incorporating any design element in the actual HTML. Letās look out our two example pages again. The HTML page is 608 lines long; whereas, the page designed with CSS is only 130 lines long. It is much easier to find your way around in the page that contains 130 lines than it is in the one with over 600 lines.
8. Better Use of Browser Cache and Server Resources
You can use CSS to design your page elements, like background images, multiple fonts and colors, or even many divisions with their own individual style. Once the external style sheet loads the first time, it is stored in the browserās cache. Then, when the subsequent pages are called, the browser does not have to render the linked style sheet over and over, so the pages load faster.
In an HTML page with a table layout, the browser must retrieve, analyze, and render each page one by one, meaning the browser is laboring just as much at displaying the 10 th or 20 th page in your website as it was when displaying the first page. Even if an HTML page is not using complicated tables, the browser still has to analyze the code before rendering the page, so retrieving all those deprecated font tags could have an effect on both how quickly the page loads, and server performance.
Search engine spiders like to crawl multiple pages of a site at a time, following all the links in a site, (unless instructed against them in the robots.txt file), but if a spider has to work harder to analyze the code to find the real content, this could also increase server load. This affects memory, CPU usage, and page file capabilities of a web server. Slowing the spider down due to poor server performance could affect how many pages get indexed at that time, not to mention the possibility of the spider just giving up and leaving the site.
9. Content Ratios
Along with file size, content ratios and density are important things to consider. Content to code ratio is the amount of actual text that exists on a given web page in relation to the amount of code required to display the content in a browser.
The Bottom Line
So why use CSS? Hereās an even better question: Why NOT use CSS?
***This is a quote from WebAIMās website.