The Link Element, Styling via CSS

There are four main states of the link-element in HTML. These include:

  • Link
  • Hover
  • Active
  • Visited


Link, is the default state of the Link, or “a” element. The Link state is the first state that the links on the page will appear in and serves as a foundation for the other states of the Link element. One may wish to style the “a” element separate from the a:link (which is an element-attribute). Hover, is the state of the “a” element when the user hovers the mouse over the defined region. Active is the state of the “a” element when the user clicks on the defined region. And lastly, the defined region takes on the Visited state, when the user has followed the link at an earlier time.

When styling links via css one may use the following:

a:link{link properties ie: color:#000; text decoration:none;}
a:hover{link properties ie: color:#333; text decoration:underline;}
a:active{link properties ie: color:#333; text decoration:none;}
a:visited{link properties ie: color:#000; text decoration:underline;}

Styling the <a> element can be a very important factor in the useablilty of a web-page. We want the user to be able to see that the text is indeed a hyper-link. With the hover attribute, we want the user to know that they are positioned to activate the hyper-link. The active attribute acts to inform the user that they have indeed clicked the hyper-link and are about to be redirected. And finally, the visited state of the <a> element can be used to show the user where they have been previously. Styling your hyperlinks can be a delicate process. Accenting the hyperlink text, without causing conflict with the rest of the site styling can be a tricky balance. If you run out of alternatives, remember the underline text-decoration can pull through when all else has failed. Don’t be afraid to experiment with background color on hovered / visited /active links. In fact, don’t be afraid to experiment. Try using background images creatively. And don’t forget that you can add a class to any link; this method is commonly used to highlight an active page in a navigation menu.

Subtle changes to the links styling can be used to communicate a change of states. One may choose to use changes is color, or changes in font-styling to show the user this change. Be careful if you use a change in font-size to accent your links (And if you must, please test browser-compatibility very diligently).

Leave a Reply

Your email address will not be published. Required fields are marked *