CSS link coloring issues

OK, I am using Joomla and for some reason I cannot get my template to display links blue within my articles.

Page example.

The actual content (the articles) are all within the jth-nimbuse-center-center-center4 div but when I format links to turn blue in that div, it somehow applies to links all over the site (like the #jth-nimbuse-center-left div and the #jth-nimbuse-center4 div. Where can I alter link styling in the CSS where it will only effect links within my articles?

I would appreciate any help.

 

a{color:#000;text-decoration:none;}
a:hover{color:#00F;}

these are the normal body tags for links. If you want something different for another div, define it.

#tfoot A{color:#000;text-decoration:none;display:block;padding-top:3px;padding-right:0;padding-bottom:3px;padding-left:0;}
#tfoot A:hover{color:#00F;}

 

Yeah, and I've tried that on the specific div I talked about above but for some reason it applies to other divs as well.

 

What's your code look like? You should have something like this:

#jth-nimbuse-center-center-center4 a:link{
color: blue;
}

Code (markup):

If you have visited all your links in your browser, then you are probably seeing the visited link color in which case you would want to have:

#jth-nimbuse-center-center-center4 a:visited{
color: blue; /*or whatever color*/
}

Code (markup):

 

Wow ... I am really stupid. I just copied the css code for the whole document:

a:link, a:visited { text-decoration: none; color: #111111; font-weight: bold; }
a:hover { text-decoration: none; }

And put it into the particular div, then changed the color without looking to see that the style applied to visited links as well as non visited links ... But wait a sec if I changed the style properties for a:link and a:visited in a particular div, wouldn't those styles only apply to that particular div? Why then are all of the visited links on my page changing to blue when I style a:visited as blue for just one particular div that is not inclusive to all of the links on the page?

 

If you want all your links to be a certain color except for a group of links in a certain div, then the way to accomplish that is like so:

a:link, a:visited{
color: green;
text-decoration: none
font-weight: bold;
/*will style all links on the page with green bold font and remove the underline*/
}

a:hover, a:active{
color: red;
text-decoration: underline;
/*will replace the green font with red and replace the underline when hovering over a text link.
}

#jth-nimbuse-center-center-center4 a:link, #jth-nimbuse-center-center-center4 a:visited{
color: blue;
/*will override the normally green font with blue, but only for links within the targeted div.  note: unless the other styles are overridden here they will be inherited.  for example: the text-decoration will still be none because that style is inhereted from a:link and a:visited*/ 
}

#jth-nimbuse-center-center-center4 a:hover, #jth-nimbuse-center-center-center4 a:active{
color: yellow;
/*will overide the a:hover and a:active styles for color.  the normally red hover effect will be replaced with yellow, but only for links within the target div.  All other styles will be inherited from the styling above.  for example the text-decoration will still be underline because it is inherited from a:hover, a:active.  Are you beginning to see how inheritance works in css?*/
}

Code (markup):