Use 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.
