Home > Messages from the Ether > Reasons for using CSS

Reasons for using CSS

I tend to trust the pundits who say that CSS is the correct technology to use when designing Web pages. Specifically, their approach is to push all style and layout information into the CSS file(s) and leave only structural information in the HTML. Even fancy menuing systems can be created using CSS + UL elements. The results give you light-weight, configurable, searchable, and simple Web pages.

Here is a review of some sites of interest.

In Stopdesign's article "Throwing Tables," the author looks at how a rewrite of Microsoft's home page would be beneficial. They point out that the page is burdened with inaccessible, kludgy, table-based markup filled with proprietary attributes and some awkward JavaScript. After describing their redesign effort, they show the results (look at the table at the end of the section titled "Just the Facts, Please"). The redesigned file size was 62% smaller, contained no tables (down from 40), no spacer GIFs (down from 35), and no JavaScript. The CSS went from 3k(5k) MS(non-MS) to 8k. And of course, the need for MS and non-MS CSS went away. For anyone who's had to deal with spacer GIFs (the most idiotic tool in Web design), their removal alone is reason for changing.

JavaScript is often used for menus. The Maxdesign site has a tutorial on creating menus using CSS and UL (unordered list) elements. They walk you through each step of creating a menu and show you what each CSS attribute affects. Along with the tutorial, they have two (1 and 2) galleries of pre-created lists.

[For reference, elements and attributes are shown here: <element attribute="value" ... >.]

A similar, and similarly useful, site is Owen Briggs's Little Boxes page. Where Maxdesign is a good resource on creating menus, Briggs's page shows you how to create multiple columns using CSS. Column layout has become a de facto standard in Web design. The "Throwing Tables" article points this out, and a Westciv article explains the benefits of this standard. An intriguing survey of 10 well known Web sites examines exactly how Web sites are similar. The survey performed some element and attribute counting, along with some higher-level layout and structural examinations, and compared the results.

An important aspect of software development is writing maintainable code (by you and others). The amount of crap removed for the Microsoft page increases the maintainability by a very large factor, and it makes even radical redesigns much easier. The site that helped convince me of the power of CSS in this regard is CSS Zen Garden. At that site, one Web page is displayed with many different CSS files (at different times), and the layout differences are staggering. CSS allows you to change layout and keep your content static.

Mezzoblue offers some advice on some of the basics and some of the basic benefits of using Web standards. Westciv has a small collection of articles on the subject. Check out the one on the evils of using tables in layout.

Finally, always refer to the source:

HTML 4.01 Specification

Cascading Style Sheets, level 2 CSS2 Specification