Cascading Style Sheets (CSS) - Why Should You Use Them

CSS layouts have been around for many years, but it is still common to see table-based layouts. Since the advent of the CSS 2.0 specification which introduced positioning, all sorts of possibilities have become available to budding website designers, and in this day and age, the only real reason to utilize tables is for displaying tabular data. More people are catching on to CSS based layouts for good reasons, you should consider using them too.

Now I will explain the benefits of using CSS for layout of a website. One of the best reasons to use CSS based layouts are smaller file sizes. Web pages based on a CSS layout typically have a much smaller file sizes than those using table based layouts. It's not unusual to see reductions of 50% or better in file size when comparing a table based layout with a CSS based layout. This leads to large reduction in bandwidth requirements.

The main reason for this large reduction in file size is that layout data is placed in the external CSS document. This CSS document is called only once when the websites homepage is accessed, the CSS document is then cached on the user's computer. In comparison, table based layouts place all the layout data in each HTML page, which is then called up and downloaded for every page on the website.

In addition, you can use CSS to replace Javascript image rollovers which also reduces page size. For more information on CSS navigation menus, see this Google Search for many examples on their creation.

Another great benefit is using a CSS layout may increase your search engine rankings. A CSS based website can appear higher in the rankings for the following reasons;

• The html code is cleaner as the formatting elements are stored in the CSS file which makes the html more accessible to the search engines.
• Important content can be placed at the top of the document.
• There is a higher density of content compared to code in the html documents.

A higher search engine ranking leads to more visitors coming to your website, in turn this should lead to an increase in enquiries and sales.

Another advantage is lower page load times due to the pages smaller file size. Slow page loading speed is often cited as the largest usability complaint for websites, a lower page loading time leads to increased usability and satisfied visitors. If your website is reliant on sales or leads, a site with increased usability should result in an increase conversion ratio.

CSS based pages load faster than tables for the following reasons;

• Browsers read through a tables based page twice before displaying their contents, once to build the tables structure, and once more to determine the content.
• Tables are rendered on the screen all at ones, no part of the table will be rendered until the entire table is downloaded.
• Tables typically require the usage of spacer images to aid with positioning.
• CSS based layouts typically require less code than table based layouts.
• When using CSS based layouts you can control the order of items rendered to the screen, using this advantage you can load the page content before slower loading images, your visitors will appreciate this.
• All code related to page layout can be stored in the external CSS file, which will be downloaded once and then cached on the visitors computer, table layouts on the other hand require the page to be loaded up and the associated formatting code with each page load.

Another excellent advantage of using CSS is increasing your websites reach beyond your everyday browser. CSS based websites are compatible with PDA's, mobile phones and Web TV. Today, almost every mobile phone made has Internet browsing support, is this a potential market you want to ignore? It is possible to make additional CSS documents specifically for mobile devices which will be loaded instead of the regular CSS document thereby ensuring your website it visible to this market. This is not possible with a table based layout.

In conclusion, converting your website to use a CSS based layout can be a tedious task especially for larger websites, but given the advantages of CSS based layouts it would be unwise to not convert your website and miss out on new marketing opportunities.

Article Written By David J. Smith, owner and operator of Webhost-Advisor.com