more magic with class's and id's

[Brendon Branigin]

Basicly heres the project im working on.Im converting www.runuo.com new site which uses layout tables and embeded styles into a site which uses css and divs.my biggest problem is getting the html hierarchy to a point where styling can be efficient

  <!-- begin navigation and info -->  <div id="navigation">     <ul>      <li>Home</li>      <li>About</li>      <li>Products</li>      <li>Downloads</li>      <li>Community</li>      <li>Shards</li>    </ul>  </div>  <div class="runuo">     <h1>RUNUO</h1>    <h2>RunUO 2.0.0 is coming</h2>    <ul>      <li><a href="#">Faster Core</a></li>      <li><a href="#">More Features</a></li>      <li><a href="#">64 Bit Support</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#1" class="more">More Info</a> </div>  <div class="playuo">     <h1>PLAYUO</h1>    <h2>PlayUO Beta 13</h2>    <ul>      <li><a href="#">Powerful Client</a></li>      <li><a href="#">Convenient Options</a></li>      <li><a href="#">Plugins Enabled</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#2" class="more">More Info</a> </div>  <div class="razor">     <h1>RAZOR</h1>    <h2>Razor 1.0.0</h2>    <ul>      <li><a href="#">Powerful Macro's</a></li>      <li><a href="#">Packet Video System</a></li>      <li><a href="#">Custom Titlebar</a></li>      <li><a href="#">Much more...</a></li>    </ul>    <a href="http://www.runuo.com/products.php#3" class="more">More Info</a> </div>  <!-- end navigation and info -->

these 4 items (razor runuo playuo and navigation) all fall in a single rownow each of the h1's share the same characteristics (box size, font size/color etc) but differ in 2 things. 1. the top border (which is a shade darker then the background)2. and the background itself (the 3 different colors)so i figure i should be able to style them based on their locationif the h1 is located within class razor it should have thebg color of #A8B62Btop border of #9DAD26but all h1 should be 165px wide and 30px high white size 18 tahoma font aligned to the right with a 15px right marginnow this is all great but i cant seem to figure out the proper way to name the style and by that i mean h1 { font-family: Tahoma; font-size: 18px; color: #FFFFFF;that covers the properties similar between all h1's but how do i handle the different propertiessorry if this comes off realy confusing

[Brendon Branigin]

never mind figured it out ;/ .class h1if anyone knows how to style the class "more" differently depending on what class its located in then let me know