Version 3 of CSS (Cascading Style Sheets) was out. But I quickly found out that versions are not versions, but levels, with each level adding more structure.

But as I learned more about the intricacies of CSS, I found out that organization became a lot easier. It is well worth your time to keep rereading specs and tutorials to pick new items up. After a year I finally stumbled on a slick way to use classes. I had noticed this before, but it never really sank in to my brain.

An example of this is defining a class for a whole section. Example:

CSS file:

div.num4       { border: 3px solid #ff00ff; margin:5px; padding:0px; }
div.num4         { border: 3px solid #ff00ff; margin:5px; padding:0px; }
div.num4 nav   { border: 3px solid #00ff00; text-align: left; margin:5px; padding:0px; }
div.num4 ul      { display:block; padding-top: 0px; margin:-20px 4px 4px 20px; list-style:none; }
div.num4 li       { border: 2px solid #ff0000; border-radius: 8px; float:left; padding: 0px 10px 0px 10px; }
div.num4 ul li   { display:inline; font-size: 15pt; margin:0px 0px 10px 0px; min-width: 120px; text-align: left; width: auto; }
div.num4 ul li a       { font-weight: normal; text-decoration:none; color:#ff0000;
                                 padding: 0px 10px 0px 10px; background-color: #FFFFFF; border: 2px solid #cc00cc;
                                 border-radius: 12px;}

All tags above use the class "num4". But when in HTML, the class is only called out at the top level, <div class="num4">. All tags within the <div> are controlled by the num4 above.

HTML file:

<div class="num4">

<nav>

<ul>

<li><a href="./edit.php?inspid=00">Current Joe Blow</a>

<ul>

<li><a href=\"./edit-acm.php?inspid=56&acmid=0">None Selected</a></li>

<li><a href=\"./edit-acm.php?inspid=00&acmid=001">Grim, Larry</a></li>

<li><a href=\"./edit-acm.php?inspid=00&acmid=002">Grim, Art</a></li>

<li><a href=\"./edit-acm.php?inspid=00&acmid=003">Grim, Peat</a></li>

</ul>

</li>

</ul>

</nav>

</div>

This code above is a drop down menu. No Java script needed. I use this within a form to give the user a selection.

Many times I have searched out new examples. I have found that there were a lot of bad example out on the web. In the end, as I have understood CSS better my code has gotten to be easier to write and to follow when going back to it months later.