Help with a:link attributes

[Peter54]

Hi, Below is my stylesheet code. I am trying to get the...

"a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;"

...code to apply only to
#nav3
#footer p
#sidebar
parts of my html. Right now the a:link attributes are applying to
the #main section also where I want to have normal blue links.
How would I change the code to reflect the changes I am seeking?
Any help would be appreciated. I'm still pretty green.

Thanks,
Peter
******************************
html,
body {
margin:0;
padding:0;
color:#000;
background-color:#ddd;
font-size: 100%;
}
#wrap {
width:760px;
margin:0 auto;
background-color:#556B2F;
}
#header {
padding:5px 10px;
background-color:#000;
}
h1 {
margin:0;
font-size: 150%;
}
#nav1 {
padding:5px 10px;
background-color:#000;
font-family: Tahoma, Sans-Serif;
text-align:center;color:yellow;
font-size: 195%;
}
#nav2 {
padding:0px 10px;
background-color:#000;
font-family: Arial, Sans-Serif;
text-align:center;color:#FFF;
font-size: 90%;
}
#nav3 {
padding:5px 10px;
background-color:#000;
text-align:center;color:#FFF;
font-family: Arial, Sans-Serif ;
font-size: 55%;
}
#nav3 ul {
margin:0;
padding:0;
list-style:none;
}
#nav3 li {
display:inline;
margin:0;
padding:0;
}
#main {
float:left;
width:572px;
padding:15px;
background-color:#FFF;
font-family: Arial, Sans-Serif;color:#575757;
text-align: justify;
font-size: 87%;
}
h2 {
margin:0 0 1em;
}
#footer {
clear:both;
padding:5px 10px;
background-color:#000;
}
#footer p {
margin:0;
text-align:center;color:#FFF;
font-family: Arial, Sans-Serif;
font-size: 70%;
}
* html #footer {
height:1px;
}
#sidebar {
float:right;
width:138px;
padding:10px;
background-color:#556b2f;
font-family:Arial, Sans-Serif;font-size: 75%;
text-align:left;
}
a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}

[swa66]

#nav3 a,
#footer p a,
#sidebar a {
  color: #FFFFFF;
} 

instead of the a:link and a:visited rules should do the trick.

[Peter54]

Thanks for your reply. I am confused. I am really
a newbie at this.

For example would
"#nav3 a" look like this:

#nav3 a {
padding:5px 10px;
background-color:#000;
text-align:center;color:#FFF;
font-family: Arial, Sans-Serif ;
font-size: 55%;
link {color: #FFF;}
link {visited: #FFF;}

or do I have to change something on the html side?

[swa66]

You're indeed confused.

I'll try to be more clear:
REMOVE:

a:link {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}

from your CSS,
ADD:

#nav3 a,
#footer p a,
#sidebar a {
color: #FFFFFF;
}

I think you need a bit of a refresh on CSS selectors:

You can select an element in the CSS e.g. by an id:

#nav3 {}

But you can also use the things like

#nav3 a {}

Which means any <a> inside and element with the attribute id="nav3".
It'll work if the a is a direct child or if it further down.

You can apply the same settings to multiple selectors if you separate them wuth a comma:

#nav a, #footer p a {}

would apply to any <a> inside the element with id="nav3" as well as any element <a> inside a <p> inside the element with id="footer".

HTH

[Peter54]

swa66,

Thank you very much. I figured it out. I did not
know that you were writing the exact replacement
code.

Again Thanks,
Peter

[Peter54]

swa66,

Looks like our posts crossed about
the same time. I was able to figure
it out on my own. I appreciate the
CSS lesson from a Master.

Sincerely,
Peter