Converting a Page to CSS

In: Articles

By J. David Eisenberg

Published on May 14, 2001

A result of the Web Standards Project‘s Browser Upgrade Initiative many developers are revising their Web Sites, switching to XHMTL notation and applying Cascading Style Sheets with the goal of separating content from presentation.

While assisting Jeffrey Zeldman with testing for this initiative, I attempted to convert a page from Yahoo! Weather to CSS. I was unable to do so after two hours of effort. There were several reasons for my difficulty:

1. It took a while to understand Yahoo’s code.
2. I wanted to use CSS – and only CSS – to specify the page’s presentation.
3. I wanted the page to look exactly like the original.

While the first of these issues was entirely reasonable, the other two weren’t. This article is meant to explain what I did, step by step, and illustrate the limits of current standards when it comes to existing content. My example page, which opens in a new window, is again the Yahoo! Weather home page.

Disclaimer: This experiment was done with Yahoo! Weather because it is well designed, popular, and doesn’t currently use Style Sheets. The original and the converted page are simulations created for educational purposes only, and are not meant to reflect on Yahoo! or its information suppliers.

In this case, I’m going to keep the look as faithful to the original as possible, without having to slavishly follow it down to the pixel. Further, this is an exercise with an eye on practicality: there are some aspects of HTML that are still useful – if not necessary – to achieve an effective page layout.

The Big Picture

A reduced and edited view of the entire page shows that it contains a heading area followed by a two-column layout (the yellow and green shaded areas), which allows for the first major question: Does one use tables or floating <div>s to do this part of the layout?

In this case, I decided to use tables to divide the lower part of the page into columns. The outer part of the table looks like this:

 <table border="0" cellpadding="0" cellspacing="0" width="675" align="center"> <tr valign="top"> <td width="200" valign="top" style="border-right: 3px solid #999999;">    <!-- left side of page goes here --> </td> <td width="465">    <!-- right side of page goes here --> </td> </tr> </table> 

Note that the first cell has a border on the right; that’s because the line separating the columns is really part of the presentation. I didn’t want to fake it by adding a spacer column with a background color; that’s not what tables are for. Of course, the spacing won’t be precisely the same as in the original. However a separator still gets created, and that’s what counts.

Centered Tables

Another use of tables is in the “Hello Guest” area shown in the picture below (reduced in length to save space).

I could have used either tables or nested <div>s to get the words Sign in to appear at the right side of the area; it seemed reasonable to stay with tables. The question then becomes how to center a table. The following two approaches do not work.

 <!-- attempt 1 --> <table border="0" style="text-align:center;">   <!-- table contents --> </table>  <!-- attempt 2 --> <div style="text-align:center;">    <table border="0">       <!-- table contents -->    </table> </div> 

These don’t work because text-align only affects text and in-line elements, but tables are block-level elements. Here’s how you center a table correctly:

 <table border="0" style="margin-left:auto; margin-right:auto;">    <!-- table contents --> </table> 

The keyword auto tells the browser to automatically calculate the margins according to a very complex set of rules. This technique is so useful, in fact, that it’s worth describing the style as a CSS class:

 .table-center {    margin-left:auto; margin-right: auto; } 

Tables for Tabular Data

Another place where tables are a natural choice is the area (shown at right) that lists areas of the world. This is tabular data, and since that was what tables were meant for, <table> is the obvious tag to use!

Yahoo!’s code uses a nested table to place the dots and the text, which are set to size="2" and have bold weight. I simplified this enormously by creating the following three styles and using them as follows:

 .size2 { font-size: 95%; } .bold {font-weight: bold; } .list-spacing { 	margin-top: 0px; 	margin-bottom: 4px; 	line-height: 125%; } 

I proceeded to use these styles as follows to achieve a nearly identical visual effect, while at the same time creating large savings in the byte-count of the code.

 <td width="33%"> <p class="size2 bold list-spacing"> &nbsp; &#183; &nbsp; <a href="#">United States</a><br /> &nbsp; &#183; &nbsp; <a href="#">Africa</a><br /> &nbsp; &#183; &nbsp; <a href="#">Antarctic</a><br /> &nbsp; &#183; &nbsp; <a href="#">Arctic</a><br /> &nbsp; &#183; &nbsp; <a href="#">Asia</a><br /> </p> </td> 

Naming Names

In the styles above, I used size2 and bold. When defining the style for the heading that reads “Browse to Find a Location,” though, it is defined like this:

 .heading-style { 	background-color: #dcdcdc; 	font-family: sans-serif; 	font-weight: bold; 	line-height: 150%; } 

Though the background is gray and the type is set in sans-serif font, the words “gray” and “sans-serif” don’t appear in the style name. That’s because we may eventually wish to change the headings to a different color or font, and it would be very confusing to have a style named “.gray-heading” that specifies a light blue background! Thus this rule:

If a style is meant to lend a specific visual effect to an element such as bold, that effect should be part of the name. If the style describes a structural part of your layout, such as a heading, the name shouldn’t refer to any specific visual aspect within the style.

Image-Bulleted Lists

Let’s turn our attention to the Weather Video portion of the page, the original of which is shown in the image at right. Again, we can simplify the code by turning this into a bulleted list, where the bullet is an image. We write the following class to be attached to the <ul> element. The drawback of this approach is that <ul> automatically indents the list. Various attempts to adjust margin-left to undo the indentation produced unsatisfactory results in different browsers.

 .video-list {    list-style-image: url(/files/includes/images/articles-converting_a_page_to_css-quot-v.gif");  } 

We’ll also use this on the right side of the screen in the Breaking Video News section.

Lists aren’t Always the Answer

The original page uses small bullets in a table for the headlines at the right side of the page, as you see in the diagram. In this instance, I used a series of paragraphs and disregarded the use of bullets. The style adds some extra space below the paragraphs to make the spacing clearer. I also used the extra spacing trick for the main articles at the right side of the page instead of requiring two <br /> tags as in the original code.

 .headline { 	margin-top: 2px; 	font-size: 80%; }  .main-article { 	margin-bottom: 1ex; } 

Summary

Since there are many repeated visual elements in the page, the process went quite rapidly. Here’s the result, which opens in a new browser window. Does it look the same as the original? No, it doesn’t, but that’s not the intention. The aim was to convert to CSS while preserving the page’s general look. Note also that, even with the style sheet included in the converted file (instead of being linked externally), the file size is reduced to 13221 bytes, a savings of almost 25% over its original size of 17069 bytes.

When you want to convert a page to use CSS, follow these guidelines:

• Realize that your page will look similar, but not necessarily identical to its current version.
• It’s OK to use tables for truly tabular data or to divide the page into large blocks.
• Avoid using tables to put borders or other frou-frou on the screen. That’s what CSS is good at doing.
• Look at the big picture first to see the scope of the process, and change individual visual elements one at a time.
• Experiment, test, experiment, and test again. You won’t get it right the first time; I certainly didn’t while writing this article!
• Enjoy the process; it may not be easy, but you are learning something new and useful.

Related Topics: CSS, Redesign