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.
