noah - 5:52 pm on Sep 15, 2004 (gmt 0)

Before this thread goes any farther, there is one element of good CSS design that has been neglected; when naming ids and classes, always name them based on the functionality they provide. So...

<div class="highlight">highlighted text</div>

is better than

<div class="green"> highlighted text</div>

The reason for this comes from the idea that someday, you might want to redesign your webpage. After you change all your other page settings, you'll notice that that green text you were using as highlights just, doesn't seem to stand out the same way. Now it should have a tan background! Easy to do, right? and without even touching the HTML! Of course, the class name "green" doesn't make any sense at all if it really generates a tan background...

Another perk to this is that it makes the process of creating alternate stylesheets very easy.

To anyone reading this thread and learning CSS, the best way I ahve found of mastering things like Floats and the Box Model is to find an existing website design created using a table based layout. Your goal is to re-create that website, pixel perfect, using tables only to store tabular data (Bonus points if you can do it without Absolute Positioning). The website should render exactly the same as the original in both Mozilla and IE (Not so hard with Standards Compliance Mode in IE now). I gaurantee, once you are done you will really understand the way these things work.