Nov 23, 2008

LoVe:HAte and links

a:link, a:visited, a:hover, a:active, this order can not be reversed, otherwise it won't work. This is due to the cascade rule. If two rules have the same specificity, the last rule to be defined wins out.

a:link, a:visited {text-decoration: none;}
a:hover, a:active {text-decoration: underline;}

Designer tend to dislike link underlines as they add too much weight and visual clutter to a page. If you decide to remove link underlines, you could choose to make links bold instead. That way your page will look less cluttered, but the links will still stand out, and you can then reapply the underlines when the links are hovered over or activated.

a:link, a:visited {
text-decoration: none;
font-weight: bold;
}
a:hover, a:active {
text-decoration: underline;
}

However, it is possible to create a low-impact underline using borders instead. In the following example, the default underline is removed and replaced iwth a less obstuctsive dotted line. When the link is hovered over or clicked, this line turns solid to provide the user with visual feedback that something has happend:

a:link, a:visited {
text-decoration: none;
border-bottom: 1px dotted #000;
}
a:hover, a:active {
border-bottom-style: solid;
}

You can create fancy links iwth image

a:link, a:visited {
color:#666;
text-decoration: none;
background: url(images/underline1.gif) repeat-x left bottom;
}

a:hover, a:active {
background-image: url(images/underline1-hover.gif);
}

You can you attribute selector to style different links.

a[href^="http:"] {
background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;
}

a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"]  {
background-image: none;
padding-right: 0;
}

a[href^="mailto:"] {
background: url(images/email.png) no-repeat right top;
padding-right: 10px;
}

a[href^="aim:"] {
background: url(images/im.png) no-repeat right top;
padding-right: 10px;
}

a[href$=".pdf"] {
background: url(images/pdfLink.gif) no-repeat right top;
padding-right: 10px;
}

a[href$=".doc"] {
background: url(images/wordLink.gif) no-repeat right top;
padding-right: 10px;
}

a[href$=".rss"], a[href$=".rdf"] {
background: url(images/feedLink.gif) no-repeat right top;
padding-right: 10px;
}