CSS hover effect issue

[ben.matthews18]

So these are the effects I am using for my navigation system in my site;

a:link{
    font-family:"Berlin Sans FB Demi";  
    text-align:center;
    color:black;
    text-decoration:none;
}

a:visited{
    color:black;
    text-decoration:none;
}

a:hover{
    color:#37414A;
    text-decoration:none;
}

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

The problem I have is that they are all using the 'a' tag, this means that all of the hyperlinks I am using in the page are using the above effects.

How do I make it so that the navigation system only use these effects?

Thanks

[drjohn]

give the links in your main nav a class or more normally, give the <ul> containing all the <li>s a class or id, and then stick the class/id name in front of your style declarations.

eg <ul id="nav"><li>your nav links in here...

then make the css like this first example, for each declaration

#nav a:link{
font-family:"Berlin Sans FB Demi";
text-align:center;
color:black;
text-decoration:none;
}

Some people put the nav in its own div, and give that an id or class instead

PS There is no way you can be sure that your site visitors have the font Berlin Sans FB Demi (I certainly don't) so some random font will be substituted instead and wreck your layout/ideas. Start by using a font-family, with your desire3d font first, then a close substitute for windows next, then a close sub that might be for a Mac, then perhaps a more general windows font, and finally a generic type (serif or sans serif)

[karol33]

just insert for particular navigation with are in separated div or table a:link, a:visited, a:hover, a:active and for content or sidebar or other divs u can input different a:link, a:visited, a:hover, a:active states