[RESOLVED] CSS Inheritance on Anchor Tags for NavBar

Hello,

I am new to CSS and am trying to finish off a project for a Web Development class which I am taking. I am having a bit of an issue with the external CSS file that I am linking to all of my pages. I have attempted to create a navigation bar on the left hand side of the page and it is working but I am having an issue with styling the anchor <a> tags in the nav bar as I already have styles defined in the sheet for a a:link, a:visited a:hover and a:active so any style that I put for the <a> tags in the nav bar get ignored and it instead inherits the styles from the above mentioned tags. I tried changing the order in the CSS file but then all of the <a> tags get values from the nav bar and drop the others.

Have created the nav bar using a unordered list where the .style_nav class is applied to the <ul> tag and the .li_nav class which is applied to the <li> tag. Here is the CSS file which I am using:

[CODE]

h2
{
background-color:#000000;
font-family: tahoma, arial;
color:#008B8B;
}

h3
{
background-color:#000000;
font-family: tahoma, arial;
color:#DCDCDC;
}

body
{
background-color:#000000;
font-family: tahoma, arial;
color:#708090;
font-size:14px;

}

a {text-decoration:none;}
a:link {color:#87CEEB;}
a:visited {color:#6A5ACD;}
a:hover {color:#66CDAA;}
a:active {color:#00FA9A;}

.site_nav {
float:left;
font-size:16px;
color:#7B68EE;
display:inline;
list-style:none;
margin:0;
padding:0;
overflow:hidden;

}

.li_nav

{
float:left;
}

.footer {text-align:center; font-size:11px; font-family:arial, sans-serif; color:#F0F8FF;}

.bottom_nav {text-align:center; font-size:11px;]

[/CODE]

Now, I would like to apply this style to the <a> tag but only to the <a> tags in the nav bar; the other <a> tags in the page should use the styles from above.

[CODE]

a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

[/CODE]

I hope this made sense. I would be grateful for any help or advice on how to accomplish this.

Thanks,
Max

Also in #CSS _↴