Link css different color scheme problem

Question

Hello all,

I have a really basic question, but I can't get it to work.

This is a basic navigation menu:

<!--      Begin menu -->
<div align="center"> <span class="nav">
  <a href="index.html" title="Graphic Boulevard - Home pagina">Home</a> | 
  <a href="autobelettering.html" title="Graphic Boulevard - Autobelettering">Autobelettering</a> | 
  <a href="reclame.html" title="Graphic Boulevard - Binnen reclame en Buiten reclame">Reclame</a> | 
  <a href="prints.html" title="Graphic Boulevard - Groot formaat printen">Prints</a> | 
  <a href="textiel.html" title="Graphic Boulevard - Textiel bedrukken">Textiel</a> | 
  <a href="ontwerpen.html" title="Graphic Boulevard - Ontwerpen">Ontwerpen</a> | 
  <a href="aanleveren.html" title="Graphic Boulevard - Digitale bestanden aanleveren">Aanleveren</a> | 
  <a href="contact.html" title="Graphic Boulevard - Neem contact met ons op.">Contact</a>
</span><br />
</div>
   <!--   Einde Menu -->

This is the CSS

/* Normal links */

a {
    font-size: 12px;
    color: #DC342F;
}

a:link {
    text-decoration: none;
    color: #DC342F;
}
a:visited {
    text-decoration: none;
    color: #DC342F;
}
a:hover {
    text-decoration: underline;
    color: #DC342F;
}

a:active {
    text-decoration: none;
    color: #DC342F;
}

/* navigation links */

a.nav {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
a.nav:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}

My problem is that for some reason, the nav links take the style of the normal links

Maybe I'm just sleeping, but I can't get it to work properly.

Can anyone see where it's going wrong?

Answer 1

This probably belongs on doctype, but I think you want your selector to read ".nav a" rather than "a.nav".

Answer 2

Kev is correct

a.nav is a hyperlink element with class of nav

.nav a is hyperlinks in parent class nav

Answer 3

Your links don't have the class "nav" themselves. You want this:

span.nav a {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:hover {
    text-decoration: none;
    color: #DFFFFFF;
    font-weight: bold;
    font-size: 14px;
}
span.nav a:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
}