CSS: Alternate link color help.

[Mr. X]

Im redesigning my little person site, and Im using CSS do define pretty much everything, text, color, formatting etc.

Now my header is a table with 2 rows. The 2nd row is a really dark grey, and thats where my text links to sections of my site (home, news, links etc). Since they are links, the color is way too dark, plus they are underlined.

The CSS that defines that section looks like this:

.bottomheaderrow {
background-color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #DDDDDD;
letter-spacing: 2px;
text-align: right;
text-indent: 4px;
font-weight: normal;
font-style: normal;
padding: 2px 10px 5px 5px;
background-image: url(header_bottom_row_2.gif);

The HTML that CSS is applied to is this:

<table width="100%" height="60" border="0" cellpadding="0" cellspacing="0" class="headerborder">
<tr>
<td class="topheaderrow">joe.pcfx.cc</td>
</tr>
<tr>
<td width="30%" class="bottomheaderrow"><a href="index.htm">home</a> - <a href="articles.htm">articles</a>
-<a href="downloads.htm">downloads</a> -<a href="gallery.htm">gallery</a>
- <a href="biography.htm">biography</a> - <a href="links.htm">links</a>
- <a href="faq.htm">faq</a></td>
</tr>
</table>

What I would like to do is make those links #DDDDDD, no underline, and upon mouseover a hover color (dont know what yet) so lets just say #ffffff for now.

Im just so confused as to how CSS classes and how I apply them to my CSS sheet work. Im doing the layout in Dreamweaver MX and manually editing code here and there whereas I cant do something in DWMX. Can someone please show me an example of where I can go with this?

[nsr81]

This should do it just for the links:

a.nav:link { color: #DDDDDD; text-decoration: none; }
a.nav:hover { color: white; }

Then just add class="nav" in your <a> tags, i.e.
<a href="index.htm" class="nav">home</a>

It can be easily done in DWMX. However I use TopStyle 3 for CSS.

Hope that helps.

[_BC]

Alternatively you could use
.bottomheaderrow a:link { color: #DDDDDD; text-decoration: none; }
.bottomheaderrow a:hover { color: white; }
This would affect all links contained with tags which have a class of bottomheaderarrow. The advantage of this method is you don't need to attach a new class on each <A>.