Simple web design, web development, information technology, & technical communication
Articles and resources for web developers and the average person. Topics include web development, web design, technical writing and communication, and all aspects of information technology.
CSS Link Styles
One of the easiest, yet most interactive, elements you can add to your Web site is dynamic link text—links that change their appearance once the user puts their cursor over them.
What are CSS link styles?
CSS has four different selectors with respect to links: link, visited, hover, and active. Because of the hover selector, you can change the appearance of a link when the mouse cursor “hovers” over the link text. Prior to CSS, this functionality was not possible. A hyperlink was a color, and that was that. You could also specify the color of visited links and active links, but the fun ended there.
Example page with CSS link styles
<html>
<head>
<style type="text/css">
a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#CC0000;text-decoration:underline;}
a:active {color:#000000;text-decoration:none;}
</style>
<body>
<p>Here’s a paragraph with a <a href=”#”>cool link</a>.</p>
</body>
</html>
The above example uses an embedded CSS to declare the link properties for the page. The default links will be black with no underline. Once a user hovers their cursor over the link text, the link will appear red and underlined.
Follow the order: link, visited, hover, active
As shown above, CSS link styles are very easy to add to your website. The only caveat is to make sure you put the link selectors in the proper order: link, visited, hover, active. If you do not list all of these properties, or list them out of order, you might see some unintended hover effects when testing your code.
Warning about styled CSS links
Styled CSS links are way more fun than plain old blue, underlined hyperlinks. You can also use other CSS attributes to create highlight effects, or even make them appear to be buttons. Keep in mind, though, that research still shows Web users respond best to blue, underlined links. If you’re building a Web site where you want your users to follow a specific path (such as an e-commerce site), you should consider the effects of using non-standard links. If there’s any reason to believe your users will respond better to plain old blue links, use them. Pretty links are not worth sacrificing the effectiveness of your Web site.
Further reading
Add a Comment
You must be logged in to post a comment.
