CSS Tip:
Add CSS Formatting To Your Page

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

In our June 2003 Beginner Tip, we discussed the benefits of removing deprecated HTML tags from your Web pages. Now we're going to take an existing Web page and show you how to do just that. In 5 easy steps we'll analyze the page, create CSS definitions, delete the HTML formatting tags, add CSS-specific formatting to enhance the page, and validate the code.

The Goal: Quick And Easy Pages

First, look at this example page that uses all HTML formatting and images for navigation.

The total size of this page is rather large for such a simple layout:

It's such a simple layout to have such a large overall download size, isn't it? And the code is so cluttered with formatting tags that it's hard to find individual page elements. Don't worry: we can fix both problems with CSS.

Step One: Find Common Elements

Next, we'll scan the page's source code to see if the formatting of any page elements could be grouped together using CSS rules. We find five!

Step Two: Create The Style Definitions

Always save a copy of the original file before you make major changes to any important page in your Web site. Here, we take the example file titled "DeprecatedTags.htm" and save it to a new file titled "CSS_Formatting.htm."

Refer to the chart in step one. Most of the style definitions are ready to place into the new page's HEAD section like this:

<style type="text/css">

body, table, tr, td
{
font-family:verdana;
font-size:12px;
color:navy;
background-color:maroon;
}

table, tr, td
{
background-color:white;
}

.tableHeading
{
background-color:navy;
font-color:yellow;
text-align:center;
font-weight:bold;
}

.cost
{
text-align:center;
font-weight:bold;
}

</style>

Note that we specifically added the table tags to the style rule for the document's body. It shouldn't be necessary because tables should inherit the BODY definition because they're part of the document's body - but Netscape browsers don't see it that way. Avoid this Netscape bug by specifically adding table elements to your body style definition.

Also note that we created two class definitions: tableHeading and cost. We'll use these inside the TD tags in the data tables.

Step 3: Remove HTML Formatting Tags

On this page, removing the formatting tags is relatively easy because the major problems are opening and closing FONT tags and the CENTER attribute.

Be careful! This third step is one of the most time-consuming and frustrating steps. Each time you add or delete code, you risk making a coding error. Some can be catastrophic and hard to find because they may only cause problems in a particular browser.

Learn more about browser incompatibility problems in our browser compatibility tutorial.

Then finally, replace the paragraph tags with the section headers with structural H2 tags:

Finally, apply the CSS class definitions we created in Step 2. Apply the tableHeader class to the data tables' header cells and data cells:

Check out the revised example file. It's a lot easier to locate specific page elements. Its size is down to 5k for the HTML code. If we were to place the CSS definitions inside an external file, we could save another 1k of download and reuse the styles on each page in the site.

But for now, let's leave the styles in the HEAD section because there are a few changes we can make to enhance the page's visual appeal and decrease the total download size even more.

Step 4: Add CSS-specific Formatting

Look at the navigation menu. It's created using 5 separate image files. They look ok, but is there really a reason to use images? We could easily style some nice navigation buttons using CSS.

This technique is covered extensively in our Create Stylish Menus Webmaster tip, so we won't duplicate it in this story. We save 15k of download by replacing those images with text navigation. We also make the page more accessible to search engine spiders and visitors with disabilities!

The page has three distinct sections, so maybe it would be nice to visually separate them with some borders. With CSS, we can add a border to just one side of a page element.

Let's create two more classes and add them to the style definition in the HEAD section:

.bottomBorder {border-bottom: 3px solid navy;}
.leftBorder {border-left: 3px solid navy;}

Then, apply them inside the appropriate TD tags where you want the border to display.

This third example page shows the results of the changes we made here in Step 4. Look at the source code and compare it to the original file.

Of course, the STYLE section of the page takes up a bit of space. Now that we have the page like we want it, we could place all style definitions in an external CSS file.

That change would decrease the total download for the CSS Web page:

With a little time, effort, and CSS, we've created a page with the same information and functionality as the original page - except that it's approximately 50% smaller! You'll see an even greater savings on pages that are more text-heavy, but we tried to keep the example simple so you can understand the concepts before you begin experimenting with your own pages.

Step 5: Validate The New HTML Code!

This last step is the one webmasters most often overlook: validate your code! We've made a lot of changes and deleted a lot of tags. That's great because now you have a page that's a lot easier to maintain.

But chances are, you'll have made some errors along the way. The most common error is a lot of orphan closing FONT tags scattered throughout your code. Also, look carefully for opening and closing carats (< and >) or quotation marks that you may have accidentally deleted.

Any of those simple errors can confuse browsers and search engine spiders and make it hard for them to separate the page's code from the content that should display on the page.

The process can be tedious, but it's critical! One quick and easy solution is to use HTML Toolbox to validate your code. It alerts you to HTML code errors that can break your page and the subscription version will even prepare a corrected version of your page that you can upload to your own server.

Even better, HTML Toolbox's Load Time Check feature will show you how quickly your pages download at different modem speeds. You won't have to guess whether or not your revised pages download faster, you'll know - and so will your visitors!