Why Use Cascading Style Sheets (CSS)?

This article explains the advantages that using CSS can bring to a website.

CSS are sadly not currently used by a large percentage of web designers. "Style" tags are much more commonplace, but utilising a separate style sheet to your XHTML code is far more beneficial than adding a separate line of code to each element of your page code to define its look. Besides, the clue is in the name, Cascading Style Sheets are meant to cascade down through multiple pages of your site - designers that use "Style" tags are missing the point.

An obvious advantage of using an independent style sheet for a web site is that it eliminates many lines of code from your pages, as multiple pages can reference the same style sheet. This means that download speeds for users are faster, and bandwidth is subsequently reduced, especially for sites where many pages are viewed per user visit.

CSS have many more features than this though. By using a single independent style sheet, the look of all the pages it references can be changed in seconds. For a designer this eliminates a large amount of copy-coding time and is the best tool for testing various superficial changes. Want to change your headings from Arial font to Verdana? You only need to change one line of code and it's reflected in all the pages that the stylesheet is referenced from.

Just like with style tags, utilising CSS you can change the look of any of your page elements, from images, tables, forms, horizontal rules, the list goes on. You can change them all with one line of code as mentioned above, or set up various classes for when you require variations. Therefore you could have a form where the buttons are blue with a white border, but then another form with white buttons with a blue border, to suit their surroundings appropriately.

The main benefit that can come from using a separate style sheet is the ability to create layouts using div classes to position elements freely on a page. This is a far superior and modern alternative to outdated layout methods, such as tables and frames. CSS layouts can give unparallelled precision and flexibility to a designer.

A much overlooked or misused feature from independent style sheets is using multiple stylesheets for the same HTML page, offering a completely different look and feel to a site.

These two pages use exactly the same XHTML base page, but are using different style sheets. This is a prime example of how different a page can look when the images and colours are changed.

Using this feature you can offer your site visitors a variety of page displays depending on their personal preference. It can also be used for more useful purposes, such as offering a "print" layout for printing out your pages without having to waste ink on superfluous image content.

Coupled with a valid XHTML site, CSS can be a very valuable tool when in the right hands.

Every web designer should be encouraged to use it and reap its many rewards.