Forum Moderators: phranque
Whenever I mousover the button, it makes the link inside the button hard to read.
I know how to set the default page link colour by doing this:
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
But, I would like to know how to set an individual link colour (including vlink). Thanks!
<a href="location.html" class="pretty_link">Location</a>
Assign your style attributes in CSS:
a.pretty_link:link,a.pretty_link:visited { color:red }
Enjoy!
you're going to need to assign each type of link a class of their own
This will work, but requires that you add the classname to every link that needs that color. If you're dealing with a whole set of links (like a nav bar) that's a lot of extra, and unnecessary, source code...
<a href="#" class="pretty_link">Link</a>
<a href="#" class="pretty_link">Link</a>
<a href="#" class="pretty_link">Link</a>
Instead, try adding an id to the container in which the nav bar resides, then use the cascade to your advantage.
So if you're navigation is set up as an unordered list...
<ul id="navbar">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
Notice that the <ul> tag has an id attribute. Now we use the cascade to style ALL links inside of that <ul> the way we want...
#navbar a {
color: REGULAR COLOR;
}
#navbar a:visited {
color: VISITED COLOR;
}
With the #navbar before the <a>nchor selector, we're telling the browser to apply those styles to all the appropriate elements inside of that IDed element, meaning only the one id attribute is added to the source.
