CSS (Cascading Style Sheets) offer a way of keeping content and design elements separate. Because this separation allows us to include more meaningful content on each page, Web sites designed with CSS often provide their owners with significant advantages over Web sites designed with the older table based techniques. Here are several of those benefits:

1. CSS (Cascading Style Sheets) with (X)HTML has become the new standard for professionally designed Web sites. Major media Web sites like ESPN, MSN and others have been redesigned using CSS. It's time to move away from the clumsily overused hacks of table based Web design.

2. CSS with semantic (X)HTML is meaningful even when the design elements are not visible due to the use of an assistive device or a Web site visitor's decision to disable style sheets.

In the early days, HTML was a simple document markup language that was ideally suited to structuring documents logically for easy comprehension. With the event of the World Wide Web, there was a popular demand for Web sites that paralleled what could be achieved with print media, and HTML was hacked and expanded to provide what the public demanded.

The most perplexing hack that has become a permanent feature of Web design is the use of tables to structure images and text on a page. This method of design renders the text presented to assistive devices almost meaningless as the continuity present to the visible eye is lost.

3. By focusing on HTML structure for meaning first and design second, a CSS designer can drastically reduce the superfluous markup created by the use of tables for design. This cleaner code can have a dramatic impact on search engine visibility. With increased search engine visibility, more of your Web site's valuable content will be indexed and become searchable on major search engines like Google, MSN, and Yahoo!. Of course, this assumes that you've created Web content that people want to read.

4. Separating design and content with CSS and (X)HTML usually results in a more flexible design. If the designer correctly separates all design elements, such as background images used in the templates, most if not all of a Web site's design can be altered by changing the images and CSS files in a single directory of the Web site. In the old days, this required the use of Dreamweaver templates, fancy find and replace techniques, and the repetitive work of checking each page of the Web site and tweaking each to fix bugs.

5. One of the reasons some large media Web sites have moved to CSS design is that the cleaner (X)HTML code is also lighter and faster to download. CSS and (X)HTML optimization is often a viable investment. If a Web site has a large amount of traffic, this often results in a major reduction in server bandwidth use and a considerable cost savings.

6. CSS designs can allow text to be resized and flow with relative grace. It seems that designers who tend towards tables as a design tool also more often fix a text size that prevents browsers like Internet Explorer from changing its size. This comes from a fear that the design will break when text sizes are changed. All sites eventually break when text size changes drastically, but CSS is more able to handle flexible text sizes that allow readers to view text at a size with which they feel comfortable.

7. No More Font Tags! OK. You caught me, this is actually a continuation of Reason #4 but is so common that it deserves a separate treatment.

Imagine a Web site of thousands of pages in which each page has 3 or 4 different styles of typefaces and sizes. Each of these variants is set using an embedded font tag. The Web site owner decides to change typefaces, and the webmaster dutifully visits each Web page and adjusts the properties of every font tag on each page. If he or she is a skilled user of Dreamweaver or other WYSIWYG editor the edits may be possible using find and replace, however, it will still be difficult to pull off quickly and will require much time to visually verify that the correct changes have been made.

Now picture a Web site with content structured for meaning. Odds are that the font tags used in the previous example were inserted to create a visually coherent and meaningful presentation. Without them, everything on the page has an equal weight. Let's replace all font tags with heading elements, paragraphs, strong text, emphasized text, and assign class names to anything like warning or alert text for which there is no stock HTML element. Now, our CSS document can assign typefaces (fonts) based on these elements, tags, and class names with complete understanding of their semantic importance in the Web page. Even better, the typefaces used can be change quickly, even in seconds, from one or more CSS files.

The second example has two benefits, ease of changing the typefaces (and all other design elements), and the added fringe benefit of a meaningfully structured, coherent HTML document that makes as much sense without design elements as it does with them.