markparnell.com.au
The benefits of CSS
Introduction
Despite the fact that the first CSS recommendation, CSS1was published by the W3C in 1998, and virtually all web browsers since Netscape 4 have supported it to at least a reasonable extent, most web authors still use only minimal or no CSS in their pages.
There are several reasons for this, which it is beyond the scope of this article to cover. The main purpose of this article is to outline the main benefits to web authors and site owners of using CSS extensively in their sites.
Many web authors are reluctant to begin using CSS because they don't want to have to learn a new technology. It is my hope that by explaining the benefits gained by using CSS, some of those authors will investigate it further.
Firstly, what is CSS for?
The idea of CSS is that it is used to control the presentation of a document, while the HTML describes the structure of the information.
So what are the benefits of CSS?
One file controls the presentation of the entire site
Firstly, using CSS for all presentational information allows you to largely control the visual side of the site from one file. This means that if you decide you want all your links to be a different colour from what they are currently, you only have to change one part of one file, instead of having to change it in various places in every file on the site.
Reduced File Size
The fact that the presentation is controlled by a single file also reduces the size of each page. Use of CSS can reduce the size of your HTML files by at least 50%, and the CSS file generally only needs to be downloaded once, as the browser will usually cache it after the first page. This has 2 main benefits. The first is quicker download time for your visitors (remember the majority of net users are still on dialup). The second is that it means your site uses much less bandwidth. This reduces the load on the server, which in turn can mean huge savings in hosting costs, as the downloads for your site are much lower.
Better Search Engine Rankings
The smaller page sizes can also help your site to rank higher on search engines, such as Google. This is because (amongst other things) the search engines take into account what is called "keyword saturation", which basically means how often a particular word appears on the page, relative to the total size of the page. It makes sense, really. If a word appears on a page 4 times, and that page is only 2 paragraphs long, that word is probably pretty important in the context of that page. If it appears 4 times on a page with 100 paragraphs, it isn't very important in the context of that page.
So why does CSS help? Search engines look at the source code of a web site, not just the text we see. Because CSS can reduce the source code dramatically, that also increases the keyword saturation of any words used on the page - which translates to higher rankings.
Easier to read code
Removing all the presentational markup from the HTML not only improves the way search engines read the page, it also makes it much easier for the author to read. It also makes it easier on a new developer coming in partway through the project, or updating an existing site.
Backwards-compatibility
CSS was designed with "backwards-compatibility" in mind. This means that browsers that don't support CSS at all will still have full access to the content of your pages - your site will be fully usable, albeit somewhat bland.
In actual fact, despite reports to the contrary, all browsers in common use today support CSS to a reasonable extent. They all have their shortcomings (some more than others), but for the requirements of most sites the support is excellent.
Different stylesheets for different media
One of the greatest benefits of being able to create separate stylesheets for different media is the ability to set up a specific stylesheet just for printing. Rather than having to generate 2 copies of each page, and have a link on every page to a "printer-friendly" version, you can just link each page to the print stylesheet, and it will print according to the style rules you set.
For example, you can set images to not show on printouts. You can set all text to black, remove the underline on links for easier reading, or even add the link address after the link text. The possibilities are virtually endless.
Conclusion
There are many benefits that come with using CSS over presentational HTML. For new sites the decision seems obvious. For existing sites, it really needs to be taken on a case-by-case basis. Is the effort of converting the site to CSS going to make enough of a difference to be worth it? This can be especially daunting if the existing web development team need to learn CSS before they can implement it. Ultimately I believe the answer is going to be "yes". Eventually it will be worth converting any site to CSS (legacy sites - i.e. sites that are no longer updated - excepted). It is more a question of timing.