This article is for people who have limited (or no) experience designing with Cascading Style Sheets (CSS) and who would like to convert or update an existing, table-based website to CSS.

Before you start, equip yourself with CSS reference materials. You may already be familiar with the website run by CSS and HTML expert Eric Meyer or with CSS Zen Garden, a large repository of CSS templates. There are many good resources on the web, including molly.com, DMXZone, W3 Schools, dezwozhere, and the Macromedia Dreamweaver Developer Center, which contains articles, information, and tutorials that explain how to implement CSS. If books are more your style, you can't go wrong with CSS Cookbook and Eric Meyer on CSS.

When you have your reference material, get familiar with CSS design basics such as padding, margins, the cascade, the box model, and measurements. CSS design concepts may seem strange at first but after you've read more about them, they start to make sense. It is also important to understand how to structure a web document. For example, heading tags in old-style HTML were often used for a style or design purpose; in CSS they also serve a function.

After you get a handle on CSS basics, and before you implement a wholesale design change, back up your entire site. If the site is particularly large, divide it into manageable sections for backing up. Only then should you attempt to proceed with the conversion process.

Okay, here we go. Let's convert your site from old-fashioned tables and fonts to newfangled divs and styles.

Step 1: Take Inventory of Your Site
Review the entire site, printing out different types of pages (forms pages, content pages, and so on) and noting the types of content the site uses (paragraphs, headings, and so on) and what fonts appear in each content type. Draw boxes around blocks of content to help you visualize the styles you will need to create for them.

Examine the structure of your pages and the website as a whole. Maybe there's something you need to update or remove. If you note the hexadecimal values of colors used in the site, you'll make it easy on yourself later when you create styles for various elements.

Step 2: Remove What You Don't Need
Remove all <font> tags from your site. Not only does this clean up your HTML code significantly, but <font> tags are deprecated (font tags are not standards-compliant with HTML 4). Removing fonts tags also makes your site accessible to screen readers — an important qualification for Section 508 compliancy.

The Find and Replace tool in Macromedia Dreamweaver is useful for removing <font> tags. Select Edit > Find and Replace and choose Specific Tag in the Search pop-up menu in the dialog box. Also choose Strip Tag from the Action pop-up menu. Point at the document/folder or site from which you would like to strip the <font> tags and click Replace All. This brute-force method is great for dumping a specific tag in one fell swoop without reviewing each and every change.

Another way to use the Find and Replace tool to remove font tags is to check to make sure that "highlight invalid HTML" is enabled (View > Code View Options > Highlight Invalid HTML), then use the Find and Replace dialog box to remove all the closing font tags. This will leave the opening font tags intactbut invalid so that they are highlightedmaking it very easy to find and review the instances and decide how you would like to replace them.

While you're removing things en masse, remove spacer GIFs from the site and replace them with padding or margins to CSS styles where appropriate. Spacer GIFs add to code clutter and can cause usability and accessibility issues.

Step 3: Modernize the Navigation
Your nav bar is probably a column of cells, each containing an image to click on. That's anathema to CSS-designed websites. Go to the Macromedia Exchange and download a free Dreamweaver extension called List-O-Rama. Use it to generate a CSS menu in no time. Walk through how you build the first menu and then examine the styles and customize them to learn how they work. After you figure out how to style your navigation, replace your current navigation with the CSS bulleted list menus. This easy fix makes your navigation bars easier to update and much more accessible. Using CSS selectors, you can even emulate rollovers and other effects that used to require graphics and JavaScript.

Step 4: Get into the Box
Finally, it's time to create CSS boxes — div tags and styles that replace the old-style table-based layout. Using your page printouts, decide what types of layout styles you need by blocking out the areas of your page and figuring out how these blocks relate to one another within the new layout structure. Although it's possible to use the Find and Replace function to remove tables and <td> and <tr> tags, avoid such a site-wide cleanup because this could cause unexpected results. Pages that are supposed to have tabular data could end up with text that's difficult to decipher or reconstruct. Allow time to confirm the changes you make as you replace tables with CSS for layout purposes.

It's a Wrap: Odds and Ends
A CSS-designed page without the CSS looks like a very plain page with simple headings, content, and subheads. Looking at a page this way, you'll see how well you've styled your content.

Be sure to use heading tags appropriately (to convey hierarchy of content, not just because of how they look in the design) and make sure all your text is contained within some type of container tag: <p>, <li>, <h1>, <h2>, and so on.

Use global Find and Replace to replace old <b> and <i> tags with new <strong> and <em> tags.

Dreamweaver features several CSS/HTML templates from which you can learn. Examine the CSS files and the corresponding HTML files to see how they interact.

Converting an existing table-based website to a CSS-based website is a large undertaking. However, by breaking the task into small pieces and addressing the most important issues first, you will make the process easy and even enjoyable.

Based in Worcester, Mass., Claudia Snell specializes in designing websites and e-learning applications. She is the manager of the Worcester Macromedia User Group.