Over riding an old CSS style with a new one

Question

Hi there,
I'm still learning how to deal with CSS and I'm having this problem. I'm redesigning an existing site and trying to override the old styles with new ones. When I select the text I want to change, I try to apply a new style, and it doesn't work. It sometimes applies part of the style. I tried to change the order of the styles in the 'all rules' panel, but that didn't work. The old rule is #content a:hover, a:active and the new one (higher up the list) is #named anchor. The problem is that the old one looks like a link to nowhere (there's a background colour). I know there must be a simple solution here (besides cutting and pasting text that looks right into the different spot and rewriting the text like I've been doing-AHHHHH!). I don't want to change the properties of that rule because it works in other places thorughout the website. Can I somehow clear all the old style info off these headings and then reapply the new style? Help!

Answer 1

CSS Pseudo-classes - Link States
You need to define a set of link states (link, visited, hover, active) for each ID or class name required.  Let's say you want to have red links in your #header and white links in your #footer.
CSS:
#header a {text-decoration:none}
#header a:link {color:red}     /**unvisited**/
#header a:visited {color:gray} /**visited**/
#header a:hover,               /**on mouse over**/
#header a:active,              /**on click**/
#header a:focus                /**on tab key**/
    {text-decoration:underline}
#footer a {text-decoration:none}
#footer a:link {color:white}
#footer a:visited {color:yellow}
#footer a:hover,
#footer a:active,
#footer a:focus 
    {text-decoration:underline}
HTML:
<div id="header">
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
<a href="some-link.html">Link in the header</a> |
</div>
<div  id="footer">
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
<a href="some-link.html">Footer link</a> |
</div>
For more on CSS pseudo classes:
http://www.w3schools.com/css/css_pseudo_classes.asp
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media  Specialists 
http://alt-web.com/
http://twitter.com/altweb