Improve Web Site Functionality with Cascading Style Sheets

As the Web becomes increasingly complex, basic HTML is mostly used as a text formatting tool. Now a far more elegant, flexible, and attractive Web-building language has begun to assert itself. It's called Cascading Style Sheets (CSS), and, although it may take you a while to learn, its advantages

CSS sites begin with a style sheet -- a document, designated by the .css file extension, which contains the various style definitions associated with a page or site's components. For example, a style sheet can tell a browser what size text to use in any or all headers, what color border to put around a given portion of content, or how wide the page should be. CSS term applies the designated styles to the page content, unless explicitly told to do otherwise. That is, the style definitions "cascade" through the code until new directions are received.

With CSS, the bulk of your markup will be done in these style sheets, which allow the information they contain to be used over and over again without being recreated. As a result, CSS pages tend to require less code, and therefore they load faster. Since a single style sheet controls your whole site's design and layout, site-wide changes only require you to update one file. The lack of markup in your code also makes that code easier to read and maintain.

Probably the most significant advantage CSS has over HTML is that it allows you to separate content from presentation. CSS still uses tags, but their relationship with the style sheets makes them far more powerful than HTML tags. They denote everything from position to design to interactive functions like rollovers.

Another benefit of CSS is that it can help improve your search engine rankings. Because its page code is cleaner and faster, and because the actual content of the page is placed higher in CSS-built pages, it's easier for search engines to decipher them. CSS also allows you to be more explicit about the exact nature of the content. For example, you could create a tag called "address" or "employees." Be sure to read What Is Search Engine Optimization? for more information on this topic.

Because content and markup are so effectively segregated in CSS sites, you can make them display in a range of formats just by referencing a different style sheet. For example, you can create a style sheet exclusively for print format, or even for cell phones.

If there's a drawback to CSS, it's that it takes time to learn. But once you're up and running with it, you'll have a cleaner, more flexible Web site that is free of table-dependent designs.