Changing link colors and styles with CSS
In the old days, link colors where specified as attributes in the body tag like <body link="#000000" vlink="#333333" alink="#666666">
Nowadays we do this with CSS of course. Seperating style (CSS) from structure (HTML). This is not only smarter in ways of seperating those layers, but CSS gives us more control as well.
With CSS we can specify the style of the link in 4 states. When it's just a link, when it's a visited link, when it's a hovered link and when it's an active link (while it is activated, ie while the link is clicked on, but not released). These are specified through something called CSS Pseudo Classes. The pseudo classes for links are :link, :visited, :hover and :active. It's very important that you specify them in this order, link-visited-hover-active, LVHA (or LoVeHAte as some people remember it by). Don't worry, after a few stylesheets you never have to worry about this order again, it becomes second nature. Let's look at an example.
Give me feedback on this page/code
Normal CSS links
a:link {color: #336699;}
a:visited {color: #666699;}
a:hover {color: #000000;}
a:active {color: #336699;}
The above code will output like this:
More Styles
Nothing is stopping is from setting all kinds of styles to our links. Let's go crazy with the styles to see how it outputs. note that the first CSS rule apply style to all links, independent of which state it is in. We can override that style in the pseudo classes.
a {
font-size: 12px;
padding: 2px;
margin: 5px;
border: 1px dotted yellow;
display: block;
}
a:link {color: #336699;}
a:visited {color: #666699;}
a:hover {color: #000000; border: 1px solid green; background-color: #ccc;}
a:active {color: #336699;}
Different link styles on the same page
A normal and frequent question from web designers that want to start using CSS, is how to apply different link styles to different links. The answer lies in giving the different links different CSS classes. Let's look at a quick example with both CSS and HTML code to see how we style 2 different links on the same page.
CSS
/* navigation style *
a.nav:link {color: #336699;}
a.nav:visited {color: #666699;}
a.nav:hover {color: #000000; border: 1px solid green; background-color: #ccc;}
a.nav:active {color: #336699;}
/*resource box style */
a.res {font-weight: bold;}
a.res:link {color: red;}
a.res:visited {color: red;}
a.res:hover {color: orange;}
a.res:active {color: red;}
HTML:
<!-- navigation links -->
<a href="link.html" class="nav">Nav 1</a>
<a href="link.html" class="nav">Nav 2</a>
<a href="link.html" class="nav">Nav 3</a>
<a href="link.html" class="nav">Nav 4</a>
<!-- Resource links -->
<a href="link.html" class="res">Res 1</a>
<a href="link.html" class="res">Res 2</a>
<a href="link.html" class="res">Res 3</a>
<a href="link.html" class="res">Res 4</a>
Output
There's no limitiation (except from valid CSS code) to what you can do here. The key is to experiement and try over and over.