How to style links
December 3rd, 2008
There are literally countless ways to style links, but is there any right way to go about it?
So, we all go to this point in every project. The time for us to style the anchor tags. This can be the most rewarding, or the most tedious, mind killing experience possible. It can make or break some designs. It can leave you feeling confused. Even worse, it can leave the user feeling confused, and that is never a good thing.
First and foremost…
You must start with clean, valid, and semantic markup on your links, that is, including title , and rel attributes if applicable.
Do you got the blues?
Luc Carton made some great points in his similar post regarding link colors. Have we moved past the blue and purple days of the early web?
I would like to always hold a special place in my heart for blue links. I have written about it before, and will probably at some point being them back to this here site. After the redesign, and some quality feedback, I decided to go with a brown for the links, and giving them an underline. I think it would be near design suicide to not underline body links.
Didn’t I already click that?
What the hell should we do about visited links anyway? Purple? Nah, doesn’t fit with my design. Lighten them a bit? Perhaps. Leave them as is?
I chose to have my links be styled the same visited as unvisited. I personally think this can be a huge usability pit fall, especially if you are already taking a rogue approach to styling, ie; not blue, and not underlined. You are walking on egg shells here. Be careful!
LoVe HAte
A very simple practice that can prevent specificity issues, in that you specify your styles in this order:
- a:link
- a:visited
- a:hover
- a:active
I will typically use an underline for both 1, and 2. Then I will remove the underline for 3, and finally when the anchor is active, make it a brighter shade of 1, and 2.
So what do you think? How do you style your links, and why? Should you style sidebars and secondary content differently than main content? Share with us.
- Posted at 11:50 am in css
- Leave a comment