RadioRadio
Saturday, March 30, 2002[2:10:10 PM]
CSS tip: Use 'hover' to get a rollover effect for your links. This is good usability, can aid readability, and it's sexy. It's easy, too. Just add a couple of lines to your stylesheet. You don't have to do anything new to the anchor tags:
<style>
a {text-decoration: none}
a:hover {text-decoration: underline}
</style>
...
<a href="/some_url">Example link</a>
You can see this in operation in the web version of Dave Weiner's DaveNet: example.
Benefits: It's good for usability to have some subtle indication that you can click on a link. Browsers typically change the cursor, but adding an underline to a link seems beneficial. It's easier to read text when it *isn't* underlined, so this particular trick is better for readability. It's also "sexy" -- we expect interactivity from computers, and this is an easy way to get a little interaction.
Slightly more advanced uses: you can also use the stylesheet to specify the color of the link. Zeldman makes links bold with the stylesheet, as well.
If you are concerned with usability, I suggest sticking to the "less is more" approach. All you need is a detectable indication that the user can click. If you want to show off all the groovy things you can do with stylesheets, then -- by all means -- go crazy.
© Copyright 2002 john robert boynton.
Last update: 9/27/02; 6:30:37 PM.