Issues with links text styles

HTML & CSS
1

hi there guys, first of all thanks for looking i am learning CSS from the ground up, and i seem to have gotten most of it, but there is a little thing that is annoying me .

i am trying to use the
a:link color: #CCC;
a:visited color:#FFF;
a:hover color:#F36;
a:active color:#FF0;

in the body of my site i am working and learning with, and i wanted all the links to have the same property in the css. Now i have a 2nd css style called menu that is used for the menu bar this has some of the UL’s using a:hover etc

I was trying to use a .class called links_footer and applying the link styles to that section on the bottm as a tester but alas it did not work, what i am trying to achieve is that the links have the same style through-out the whole document can anybody advise on where i left the path as it were :slight_smile:

here is an example Untitled Document

2 
.bottom_links
{
	a:link color: #CCC;     
	a:visited color:#FFF;  
	a:hover color:#F36;  
	a:active color:#FF0; 
}

should be something like

.bottom_links a:link {color: ... }
.bottom_links a:visited {color: ... }
.bottom_links a:hover {color: ... }
.bottom_links a:active {color: ... }

if you want all links on the site to follow the same colour scheme you can take out the bottom_links class on all of those.

3

ok i think i am missing something here i followed your example and still its not working the way that i would like it to. do i still need to add the


.bottom_links
{
bottom_links a:link {color: #CCC;} 
bottom_links a:visited {color:#FFF;}  
bottom_links a:hover {color:#F36;}  
bottom_links a:active {color:#FF0;}
}

to the css document because if i try this it will not work… i am sure its a conflict with the menu link and hover settings as it seems to be following that scheme rather than changing to the grey that i would like to use :frowning: i was under the assumption that if i defined a class to the html, then it would pick it up in the CSS as long as i told it what to do and i could have as many instances of that as i liked as long as the class name was different… very confused!!!


<div id="footer">
<div id="footer_links"><span class="bottom_links" id="footer_links"><a href="#" style="text-decoration : none;"> <strong> sitemap |</strong></a> <strong><a href="#" style="text-decoration : none;"> xml |</a> <strong><a href="#" style="text-decoration : none;"> news |</a></strong></span>
</div>
</div>
4

Get rid of the bits in red, and add the bits in blue.

<div id=“footer”>
<div id=“footer_links”><span class=“bottom_links” id=“footer_links”><a href=“#” style=“text-decoration : none;”> <strong> sitemap |</strong></a> <strong><a href=“#” style=“text-decoration : none;”> xml |</a> <strong><a href=“#” style=“text-decoration : none;”> news |</a></strong></span>
</div>
</div>

You’ve got two things there with id=“footer_links”, but you’re only allowed to use each ID once, so that’s not going to work.

Second, you really don’t need that <span> there, if that’s the actual code on the site - just have <div class=“bottom_links”>. (Do you really need to have both an ID and a Class covering the same item?)

5