Steffen Müller's TYPO3 blog

Styling weblinks with CSS

CSS gives you so many powerful methods of styling weblinks. We not only have pseudo classes to distinguish between visited/unvisited and hovered/activated links, but also those highly configurable attribute selectors to individually style all types of protocols (mailto, https, ...) and document types (pdf, mp3, ...)

There are so many different link types in the web, but usually they all come with the same styling. Underlining and coloring seems to be the prefered method.

The first time I realizied those million ways to apply styles to links, was some years ago, when Wikipedia started to explicitly tag external links with png icons. Last week I found some time to dig into CSS and attribute selectors and the stuff I saw was amazing. Not only we can style one and the same HTML element with different ids or classes, but also by choosing any other attribute or part of it. On a small scale, a kind of Regex is allowed to differentiate cases more precisely:

HTML

<a href="http://www.domain.net">An external link</a>

CSS

a[href^="http:"] { background: url(ext.png) no-repeat right; }

This will add a little icon on the right side of the link. The attribute selectors [href^=value] limits the style to links starting with http:. If your browser supports CSS2, you can see the effect. Now have a look at the next example:

HTML

<a href="http://document.pdf">my Thesis</a>

CSS

a[href$=".pdf"] { background: url(pdf.png) no-repeat right; }

This will highlight links to pdf documents. The attribute selectors [href$=value] limits the style to links ending with .pdf. And here comes the example.

Now, that IE7 is going to replace its ugly ancestor, attribute selectors are also supported by the MS empire. The next step seems to be microformats, which mainly use attributes to semantically markup web content.