CSS Styled Hyperlinks In DIV Tag

I resolved a hyperlinking style issue yesterday that had been bothering me for the past week or so. I was having a fit trying to figure out how to style hyperlinks that were being dynamically generated from one of my MySQL database tables into a DIV container (i.e. layer) on my web page. I've been defining link styles as a class and adding them to my links inside the href tags (e.g. a href="http://somelink.com" class="linkstyle" ) on a case-by-case basis, but this approach is impractical when links are generated via a queried recordset.

I couldn't for the life of me remember how to correctly assign hyperlink styles or states like hover, visited, etc. to a defined CSS class that also contains things like border and margin definitions. Luckily, my memory was quickly "jogged" after soliciting help in the webmaster forum. I was a little embarrased at how simple of a technique it is to do this-- oh well. At least I got my answer.

The proper way to style all hyperlinks inside a DIV tag is to add ADDITIONAL styling to your CSS class OUTSIDE the curly braces that envelope the defined class in your style sheet. I think the correct definition of these addtional stylings are referred to as psuedo classes. I was pulling my hair out because I was attempting to add the link styling INSIDE the original class definition! Duh!!

Here is how to do it correctly:

.box {

background-color: #22231F;
letter-spacing: normal;
text-align: left;
text-indent: 5px;
vertical-align: middle;
word-spacing: normal;
white-space: normal;
BORDER-TOP: #333333 1px solid;
BORDER-RIGHT: #333333 1px solid;
BORDER-LEFT: #333333 1px solid;
BORDER-BOTTOM: #333333 1px solid;
padding:2.0em;
margin-left:0px;
margin-top:2.5px;
margin-bottom:.5px;
margin-right:.5px;
font-size: 11px;
font-style: italic;

was trying to add the following definitions here!!

}

.box a { text-decoration: none; color: #FFFFFF; }
.box a:visited { color: #EEEEEE; }
.box a:hover { color: blue; text-decoration: underline; }
.box a:active { color: #CCCCCC; }

I also learned through this experience that there is a difference in CSS between an id (when a style is applied to a unique identifier) and a class (a style that can be applied to many). Pound signs (#) are used in the CSS code when DIVs are styled using the ID Selector method. I was not aware of this ID vs Class distinction!

p#exampleID1 { background-color: white; }

<p id="ExampleID1">This paragraph has an ID name of "exampleID1" and has a white CSS defined background</p>