basic css question

[Billy T]

Hey all

ok I'm working on a css and I can set my link colours with something like

a:link {color: #FFCC00}
a:visited {color: #00FF00}
a:hover {color: #FFCC99}
a:active {color: #0000FF}

but say I have a part of the website (eg footer) where I want the links to appear differently. How do I do that?

I know I could make a <p> class with something like

p.footer{

}

and then put my footer content inside

<p class="footer">

but I am unsure how to put the above <a> syntax code into the p class code

I'm sure its very simple and I've probably explained it really badly but if someone could help me out it would be much appreciated

Thanks

[JHallam]

I would linkage the sheet then just have as many classes as needed.

Your right by saying about the class. just set the class then the link or colour of the text etc

Like;

<!--
.noEffect { text-decoration: none }
-->



<a class=noEffect href="billy.html">No Effect here?</a>
<a href="Billypage.html">Normal Effect here from basic a.link Properties</a>


See how I mean? just create the class then assign them to what you need.

[Billy T]

sorry I dont really get it

can you show me how that would look inside the

p.footer{

}

class?

I've tried that many diferent syntaxs but cant get it to work

p.footer{
link-color: #FFCC00;
}

?

thanks mate

[JHallam]

Okay..

<!--
.noEffect { text-decoration: none }
.footer { font-weight: bolder; color: red; background: white }
-->


then just basically use / links like so...

<a class = noEffect href = "billy.html"> No Effect here! </a>


<a class = footer href = "Billypage.html"> Footer Effect! </a>


Hope that clarifys mate

Can you tell me why your calling the class with

p.footer?

[Billy T]

umm I'm not sure...I guess .footer would also be fine

that still doesn't work for me (because my text is links and they inherit the properties of the a: class?) and what I really need is to be able to get the hover and active colours working as well

so what I need to do is put this

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

inside this

.footer{
color: #FFCC00;
}

so that links in the footer have different colours to the rest of the site

Thanks for your help on this

[Billy T]

yay got it

a.footer:link {color: #FFCC00}
a.footer:visited {color: #FFCC00}
a.footer:hover {color: #CCCC99FF}
a.footer:active {color: #FFCC00}

thanks again