How to Use CSS for Search Engine Optimization

By Mikhail Tuknov

Cascading Style Sheets (CSS) is a language that permits Web designers to attach styles such as spacing, color, font, etc. to HTML documents. Cascading style sheets are similar to a template, permitting Web developers to label styles for an HTML element and then apply it to the number of Web pages required. Thus, Cascading Style Sheets (CSS) are collections of formatting rules, which control the appearance of content in a Web page. With CSS styles you have great flexibility and control of the exact page appearance; from precise positioning of the layout to specific fonts and styles.

There are many benefits of using CSS. Maintenance of a Web site made with CSS is much easier compared to the ones which are table based. Aside from being able to make extensive changes with one CSS file, the code it generates makes it simpler to update. With CSS, when you decide to craft a change, you simply alter the style and that element is updated automatically anywhere it appears in the site, saving you an enormous amount of time. Without CSS you'd have edit each page independently. CSS generally requires less code compared to a table based layout, making your code lighter, cleaner and easier to maintain.

Cascading Style Sheets Benefits and Search Engine Optimization (SEO)

Another major benefit of CSS is that it makes your Web site SEO friendly. The reason behind this is simple. Search engines spiders are actually lethargic. They don't go through the bundles of HTML code to get to the indexed codes. Font tags and tables make HTML code cumbersome, and thus reduce the accuracy of the results. If you use external CSS files to determine the design attributes, the HTML code will be clean and will create better search engine rankings. With some knowledge of CSS you can change the code without destroying the visual layout. For instance, you could easily make the main content of your site to show up above the header or navigation menu in the code of your Web site; this will help to show search engine crawlers the importance of your content. I personally saw a huge boost in rankings in fully functional CSS Web sites. When I look at someone's Web site that was built using old school HTML code with tags such as: TABLES, TD, TR, FONT and so on, I convert that site to a CSS layout. There are many tools on the Internet that shows the actual code over text ratio weight of your site. Modern search engines such as Google, Yahoo and MSN love light-weighted Web sites. They want to see your content; the text, not the code. With CSS everything is possible. You can place excessive code into an external file, thus leaving the actual page clean and simple.

Web Site Accessibility

CSS makes your Web site more accessible. By 2008, it's estimated that one-third of the world's population will be using hand held devices to access theInternet. It's important that your site is accessible to them also. You can make an additional CSS document particularly for handheld devices like cell phones, which will be called up in place of the regular CSS document; which is not achievable with a tabular layout. CSS benefits accessibility chiefly by separating document structure from presentation.

Increases Download Speed of Your Website

CSS code downloads faster than tables. Browsers read through tables twice prior to exhibiting their contents; first to work out their structure and then to determine their content. Moreover, tables are shown on the screen as a whole, no part of the table will be displayed until the entire table is downloaded and rendered. Tables support the use of spaced images to assist with positioning. CSS generally requires less code than tables. All layout code can be placed in an external CSS document, which will be called up just once and then stored on the user's computer; while the table layout stored in each HTML document must be loaded up each time a new page downloads. Also with CSS, you can manage the order of the items downloaded. You have the control to make the content appear prior to images, which tend to load slower than text.

Cross Browser Compatibility

To summarize, CSS makes your Web sites load faster, it saves on time and labor, links can be more attractive and dynamic, and you can add rollovers without using JavaScript. Currently all the major browsers ( Firefox, Explorer and Netscape) recognize CSS.

About The Author

For more information, contact Mikhail Tuknov through his Web site or by email.You can call him at: 858-775-6850

Created: March 27, 2003
Revised: January 3, 2007

URL: https://webreference.com/authoring/css_seo/1

How to Use CSS for Search Engine Optimization