[thelist] CSS Guidance

[Simon Willison]

Gina Anderson wrote:
> Ah-ha! Thank you! This does indeed work. I'm having a hard time wrapping my
> head around this part of CSS..the positioning as well. Thanks a bunch,
> you've made my day!

CSS selectors (the stuff like "div.blogbody img") are in my opinion the 
most undervalued part of CSS - if you learn how to use them properly you 
can greatly reduce the amount of markup you need in your document to 
allow you to effectively hook in CSS. Just as an example, the following:

<style type="text/css">
p.bodypara {
   border-bottom: 1px solid black;
}
</style>
<div>
<p class="bodypara">hi there...</p>
<p class="bodypara">another paragraph</p>
<p class="bodypara">and another</p>
<p class="bodypara">and another</p>
<p class="bodypara">and another...</p>
</div>

Can be replaced by:

<style type="text/css">
div.body p {
   border-bottom: 1px solid black;
}
</style>
<div class="body">
<p>hi there...</p>
<p>another paragraph</p>
<p>and another</p>
<p>and another</p>
<p>and another...</p>
</div>

That's the power of rule based design. Selectors aren't actually that 
complicated once you get the hang of them - you might find my CSS 
selector tutorial useful: 
http://simon.incutio.com/archive/2003/05/18/anatomyOfAStylesheet