CSShark - CSS Link Styles
The CSS Know-How Site

Link Styles

How to remove underlines from links?

The classic CSS question. Variations are: How do I make different colors for links on the same page? How do I make a text rollover?

a:link {
  color: #0000FF; 
  text-decoration: none; 
  background: #FFFFFF;}/*normal links in the text*/
a:visited {
  color: #FF9999; 
  text-decoration: none; 
  background: #FFFFFF;}
a:hover { /*this effect is not shown in NN4.xx*/
  color: #999999; 
  text-decoration: underline; 
  background: #FFFFFF;}
a:active {/*colour in NN4.xx is red*/ 
  color: #9999CC; 
  text-decoration: underline; 
  background: #FFFFFF;}

This gives you links that are blue without being underlined in the unvisited state, after they have been visited the colour is salmon-pink (also without underlines), the 'hover' state is medium-grey and shows the underline, and the 'active' state - the moment when the link is actually clicked has a purple-lilac colour and underlines. The 'hover' state are not rendered in NN4.xx, and 'active' in NN4.xx is always red.

Click HERE for an example of the link styles.

The sequence of the links is very important.

1. The style that is physically below another one has more weight -> importance.
   
   
2. you declare first the a:link (that's the short form for a:un-visited) and the a:visited. No problem here, those two styles are applied to different states of a link.
   
   
3. if you put a:active in the third spot, that means that the last style, a:hover will have more importance.
   
   
4. if you put a:hover in the last place and give it therefore the highest level of importance, then the a:hover style will win out every time: you hover over a visited link, and it will take the hover-color. You hover over an unvisited link (a:link), and it will hover. You hover over the a:active link and you will *not see* the a:active color, because this declaration is ABOVE the hover-declaration and therefore has less importance, therefore the hover style wins.
   
   
5. you put the a:hover in pos.3 and a:active in pos.4: that means that you still can hover like a helicopter, but in the *click situation* the a:active shows -==> because it is now the most important style!
   
   
6. let's go crazy now: Let's put the a:visited on pos.4 - logic says that now
   
   
   • an un-visited (a:link) link is still unvisited, therefore has the un-visited color
     
     
   • each other style then will be overridden by the a:visited style -> you don't see the a:hover style after you visited this link, and you can forget about the a:active. The visited style overrides each other style *when the link has been visited* (un-visited still hovers etc)
     

Conclusion: If you put your link styles like spaghetti, nothing bad will happen. The site will not crash. It will affect only the hover (and the active) style, and if they show up and when they show up.

Please think about 'hiding' your links. If you make your links unrecognizable as links, then you take something away from the visitor of your site. Styling is good, usability is better...

P@tty Ayers has a wonderful tutorial that explains how to style links on a web site with DreamWeaver^TM, and Project VII explains with this tutorial what pseudo classes are and how they are implemented. If you want the explanation what 'link specificity, is, then you should go to Eric Meyer's http://www.meyerweb.com/eric/css/link-specificity.html.

Other topics:

•  Syntax
•  Elements, Properties and Values
•  Links
•  DIVs and SPANs
•  CLASS and ID
•  Inheritance and
•  The Stylesheet