CSS Help

[Mavicator]

Anyone good with CSS? I can't figure out why my link tags aren't working. Here's the style sheet I want to use:<br><br>.main {background-color: #cccccc; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000}<br>H1 {font-size: 22pt; font-family: Verdana; color: #000000}<br>a:link { text-decoration: none; color: #000066}<br>a:visited { text-decoration: none; color: #000066}<br>a:active { text-decoration: none; color: #000066}<br>a:hover { text-decoration: underline; color: #0000ff }<br><br>.small {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000}<br>a:link { text-decoration: none; color: #000066}<br>a:visited { text-decoration: none; color: #000066}<br>a:active { text-decoration: none; color: #000066}<br>a:hover { text-decoration: none; color: #0000ff }<br><br>.menu {font-family: Verdana; font-size: 13px; color: #000066}<br>a:link { text-decoration: none; color: #000033}<br>a:visited { text-decoration: none; color: #000033}<br>a:active { text-decoration: none; color: #000033}<br>a:hover { text-decoration: none; color: #000000}<br><br>.side {font-family: Verdana; font-size: 9px; color: #000066}<br>a:link { text-decoration: none; color: #000066}<br>a:visited { text-decoration: none; color: #000066}<br>a:active { text-decoration: none; color: #000066}<br>a:hover { text-decoration: none; color: #0000ff }<br><br>I insert a class tag into whatever table on the page I want to assign a style to (main, small, menu, side). Problem is, the entire page uses the last link properties in the style sheet and ignores the rest. Links are always the same no matter what I do. Any ideas? <p><!--EZCODE IMAGE START--><img src="http://www.camerasupport.com/oV/mavsigr ... <!--EZCODE IMAGE END--></p><i></i>

[XMEN Viper DTM]

The problem with the styles that you have is that all of the hyperlinks' styles are being redefined because they're not being named. If they are not named, then the style will apply to the entire page.<br><br>.side {font-family: Verdana; font-size: 9px; color: #000066}<br>a:link { text-decoration: none; color: #000066}<br>a:visited { text-decoration: none; color: #000066}<br>a:active { text-decoration: none; color: #000066}<br>a:hover { text-decoration: none; color: #0000ff }<br><br>The above style will apply to all of the hyperlinks on the page. You can assign them to a class, however, by using this format:<br><br>.side {font-family: Verdana; font-size: 9px; color: #000066}<br>a.side:link { text-decoration: none; color: #000066}<br>a.side:visited { text-decoration: none; color: #000066}<br>a.side:active { text-decoration: none; color: #000066}<br>a.side:hover { text-decoration: none; color: #0000ff }<br><br>You can see then why only the last styles are used, as the generic style for the hyperlink was being redefined.<br><br>I hope that this helps. <p><!--EZCODE IMAGE START--><img src="http://www.microsmithinc.com/Viper/viper.gif" style="border:0;"/><!--EZCODE IMAGE END--></p><i>Edited by: <A HREF=http://pub141.ezboard.com/bxmenclan.sho ... erdtm>XMEN Viper DTM</A> at: 1/27/04 7:30 pm<br></i>

[Mavicator]

Thanks. I actually tried exactly what you described earlier in the day and it didn't work, in fact made things much worse. I may have screwed it up though. I'll try again. Thanks for the help! <!--EZCODE EMOTICON START :) --><img src=http://www.ezboard.com/images/emoticons/smile.gif ALT=":)"><!--EZCODE EMOTICON END--> <p><!--EZCODE IMAGE START--><img src="http://www.camerasupport.com/oV/mavsigr ... <!--EZCODE IMAGE END--></p><i></i>