Posted By Kenny McHoes, February 27, 2011

CSS (Cascading Style Sheets) are files that control the visual appearance of your website. These files are used to control the font size, font color, background color, background images, many other attributes. Although they do function as a way to layout a site, they also reduce the size, clutter, and load time of your pages. When someone excludes the CSS from a website, they in turn have to use HTML to adjust their layout. Eventually the excessive code may become hard to look through and it becomes tedious to make website changes. Below I will discuss the main points of using CSS.

Speed

Tables are another element that CSS can eliminate. Designers use tables to layout/arrange their text and graphics. Without CSS, a webpage can become teeming with tables nested inside other tables. A large webpage with many tables will load slower than the same page without them. This is because web browsers only load a webpage after it has scanned through the tables twice; once to figure out how they are structured and once again to determine their content. Therefore it’s always a good idea to use CSS styled div’s to replace website tables.

Faster Editing

A great function of CSS is the ability to change the look of a website in minutes. When all of your website’s attributes are stored within a CSS file, changing your look will only involve editing the CSS file rather than editing your fonts, colors, and other elements page by page. This could cut your editing time from hours into minutes. This is a big plus when you are paying a web designer to edit your website.

Search Engines Like CSS

Another important function of a CSS file is to make a website SEO (search engine optimization) friendly. Search engines are rather picky. They like to get to the site content, save it, and move on. When your webpage is full of style tagsand tables, the results of their scans may become less accurate and scattered. There is a chance that they miss some of your important content.

Clutter

The text below is is about 5% of code that I borrowed from a website (The full version can be seen here). It uses no CSS, and there are a few tables. As you can see there is a lot of code.

Now this next piece of text is that same section of the website (The full version can be seen here) but I have stripped away all of the font, color, and table elements and moved them to a CSS file.

This is an example of web code that is styled with CSS. It’s real simple and straightforward. But don’t let the simplicity fool you. With this little bit of code, the page will load with the same look and feel as the first bit of code, only faster and without errors.

When you compare the two pieces of code, you notice that the CSS modified version is much lighter than the original. This is what you want, a fast loading, SEO friendly, sexy website. Google and all the other search engines will now be your friends.

Tags: css, optimization, search engines, seo, website speed