Dreamweaver Article

Gradually Implementing CSS in Your Site

In my last article, Why Use CSS?, I talked about the benefits of using CSS in your web design and development endeavors. Since that article hit the Macromedia website, I have been literally inundated with e-mail asking, How do I move from traditional HTML markup to CSS? The answer, as you all know, is "Very carefully."

All kidding aside, the truth of the matter is that there is no silver bullet capable of slaying the <table> and <font> dragons and rendering your site a complete, fluid, and flexible CSS masterpiece. However, as any good late-night infomercial will tell you, a nip here and a tuck there will have your site looking like new, and even easier to maintain.

In other words, contrary to popular opinion, CSS is not an all-or-nothing decision. You can gradually implement CSS into your designs and, in turn, gradually reap the benefits upon which I expounded in my previous article.

The first step in implementing CSS (after repeating the requisite "I will no longer use the <font> tag" mantra), is to identify exactly "what" is wrong with the current design. While HTML is relatively easy to learn, it also is extremely limited in its design capabilities. The reasons for the limitations are simply that the language was designed to "mark up" or identify content—not create complex designs on par with traditional page layout applications such as QuarkXPress or Adobe InDesign. Of course, intrepid designers found out very quickly that the tags which were designed to identify content could also be leveraged as a design tool. In doing so, however, they began to leave behind the true advantages of a markup language—the ability to change the presentation of the markup easily.

If you've ever inherited a site from a client and sat silently pondering the designer's repeated use of the <font> tag or infinitely nested tables, which even an MIT graduate would find difficult to decipher, you already know what I'm talking about. For the rest of you, the presentational markup simply ends up getting in the way of maintaining and updating the site. Imagine the difficulty of modifying a layout containing 1500 individual font tags in a single page! (If you think I'm exaggerating, I'll refer you to a recent seminar attendee I met in Miami named Chris, who told me about this very "slight modification" to a site.)

The core essence of CSS is to replace the presentational markup in HTML documents. But that statement begs the question: What is presentational markup? You can boil the answer down to any tag or attribute which determines the way a browsing device displays a piece of content.

As you begin to identify tags and attributes to remove, it is important to remember that removing certain tags and replacing them with CSS might cause the page to degrade beyond an acceptable level in older browsers. Only you can draw the line about what your site's target browser level should be. For the purposes of this article, you'll remove only the styling information from the page, leaving the underlying table structure. This means that the page will still render its basic layout in older browsers but give you added flexibility through CSS to style the content—and you'll be a long way down the road, should you decide to replace the table structure with a pure CSS design at a later date.

Before proceeding, it is important to mention this final warning: Make sure you back up the page(s) that you intend to modify before proceeding.

Requirements

To complete this tutorial you will need to install the following software:

Macromedia Dreamweaver MX 2004

Page 1 of 4

Next Page

About the author