Overall, the editing process is simple:

• vivisect the current design - tweak it and see how it works
• edit its structure by editing the templates - so that you get a page that looks like it has but works the way you want to
• edit its stylesheet - until it looks the way you want

In practice, I have found it useful to take a sample file of output (you do have that "index.html" from the old site handy, right?) and make its html look great with the new stylesheet, then chop it up to make the templates behave accordingly. That's mostly a difference in the way you do step 2, though. You might have more success, especially if you're just experimenting with stylesheets, if you follow the process summarized above and detailed below.

First I had to vivisect the existing stylesheet, which to me means exposing the innards by making the elements visible. I went in and gave borders to all the named styles in the stylesheet. To each style I added:

border-color: #000;

border-width: 1px;

border-style: solid;

... I left html entity styles alone, so this stayed:

a:link { color: #06f; text-decoration: none; }

The resulting page got ugly, but I could see where styles were (and even more usefully, weren't) used:

I left some of these borders in until I was done. I also then made the table borders visible:

<table border="q" width="85%" cellspacing="20" cellpadding="0"><tr>

Now I have this, and I can see where everything is. If I really wanted to, I could start adding colors to the styles or to table cells in order to pinpoint specific elements.

I think I've got it down now, though. The next step (and the next entry) will be to make a new html file, and from it new templates, that are ready to give that same layout but with CSS rather than tables. It's worth asking-- why? There are two reasons. First, by making your html use CSS you're separating the content from the presentation. The html that results is *much* easier to read because it pulls the html junk out of your beautiful entry. Secondly, if you are using CSS to change the layout, you can do crazy things like CSS Zen Garden does. If I have my way, the end of this process will be one set of templates, three stylesheets, and three completely different looks.

I was going to to tables ->CSS next, but that will have to wait. I need to get the stylesheet ready first.