I agree that this isn't a great example, since you could certainly use
DIV elements instead of SPAN here:
<style type="text/css">
div.tabs div { width:200px; float:left; ... }
</style>
<div class="tabs">
<div>Tab 1</div>
<div>Tab 2</div>
<div>This is Tab #3</div>
</div>
I think a lot of people get unhappy with CSS because they are not using
semantic markup in the first place. That's how we wound up with tag soup
in the beginning, and now we have CSS soup instead.
If you use markup that pertains to the structure of a document, there
aren't that many places to go wrong. The example above looks like a list,
so I would use list markup and style the elements accordingly, eg:
ul {border:1px solid #000; list-style-type:none; padding:1em;}
ul li {width:200px; float:left; text-align:center; border-right:1px solid
#c0c0c0;}
<ul>
<li>Apples</li>
<li>Oranges</li>
<li style="border:0">Grapes</li>
</ul>
and you would come up with something like:
Apples | Oranges | Grapes
Of course my favorite use of CSS is to produce GreenBar tables where I have
a colora and colorb classes defined in an external stylesheet, and this
markup:
<% if counter mod 2 = 0 then
theclass = "colora"
else
theclass = "colorb"
end if
%>
<tr class="<%=theclass%>">
<td>data</td>
</tr>
<% 'continue loop and update counter %>
external sheet:
..colora {background-color:#fff; color:#000;}
..colorb {background-color:#f0fff0; color:#000;}
What's so great about that is consistency for the entire site. If I want
to change it to blue bar, I just need to change the colora and colorb
classes in the external sheet, and voila! the whole site is changed.
