Multiple CSS Classes on a Page?

[amyinomaha]

I need to have multiple CSS classes on a page for the links. For instance, the links on the left hand navigation area are set up correctly - with the white. However, I want to have different colors for the email links on the right hand "main" area as white doesn't work because of the background color. How do I do this?

Example:
http://www.amcon.com/amy/ipg/contractvoice.html

[Jazzee]

Set different classes for different links.

Example
a.leftnav: color you want;

In Page:
<a class="leftnav"...

[amyinomaha]

Please bear with me... I'm just learning this CSS stuff now. Heheh. Okay, so right now, I have this:

<STYLE TYPE="text/css">
<!-- A:link, A:active
{
text-decoration : none;
background : transparent;
}
A:visited
{
text-decoration : none;
background : transparent;
color: #FFFFFF;
}
A:hover
{
text-decoration : none;
background : transparent;
color: #C9D9E1;
}
</STYLE>



So, how exactly do I set it up then to have the different classes?

[Jazzee]

Make your stylesheet look like this (notice I added the leftnav stuff at the bottom):

[code:1:340f0f707b]<STYLE TYPE="text/css">
<!-- A:link, A:active
{
text-decoration : none;
background : transparent;
}
A:visited
{
text-decoration : none;
background : transparent;
color: #FFFFFF;
}
A:hover
{
text-decoration : none;
background : transparent;
color: #C9D9E1;
}

A:link.leftnav, A:active.leftnav
{
text-decoration : none;
background : transparent;
}
A:visited.leftnav
{
text-decoration : none;
background : transparent;
color: #FFFFFF;
}
A:hover.leftnav
{
text-decoration : none;
background : transparent;
color: #C9D9E1;
}

</STYLE> [/code:1:340f0f707b]


Everything with leftnav after it above should have the left and top nav colors that you want. Make the other ones at the top have what you want your main content colors to have.

Then in your page, change all the links in the left and top nav bars to have class="leftnav" inside the tags. Like this:

[code:1:340f0f707b]<a class="leftnav" href="index.html">[/code:1:340f0f707b]


Make sense? I am not very good at explaining things.

[LazyJim]

You are missing the Cascade boat there!
if your middle section has a class="mid_section" then the following rules will do the trick wihtout needing to set the class="" on each <a> element.
[code:1:d3d5311671]
<style>
a:visited { color: white; }
.mid_section a:visited {colour: darkblue; }
</style>

<div class="mid_section">
<a href="...">link in the mid section will be darkblue after it's visited</a>
</div>
<a href="...">link OUT of the mid section will be white after it's visited</a>
[/code:1:d3d5311671]

[Jazzee]

Hmmm... I thought the way I did it would be easier to explain

[Distorted]

I think that jazzee's way is better since it will only change the links with the class, and not every link within a parent with the class.

^Just my opinion

Or you could just put both methods into one.

[code:1:9d3bfa6f52]
div#navigation a.leftNav {display: block; text-decoration: none;}
div#navigation a:hover.leftNav {background-color: black; color: white;}
[/code:1:9d3bfa6f52]

[LazyJim]

the whole idea of CSS is that you don't have to add mark-up to every HTML element.

i was not saying the code i put should do everything he want's sraight awaym u need other rules, using mine as a demonstration of utilising cascade it shouldn't be hard to apply to whatever element u want, and to add rules for :hover :link as well as :active

I was also not introducing # selectors as he seemed happy using classes, and leaving it that was less complicated I didn't want to try introducing the other concept at the same time!

[Distorted]

I'm sorry. I understand what you're saying now.

[LazyJim]

lol good, maybe i should have explained it better, i was in a rush !