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>
