Home » Tutorials » CSS » Links

Links

Links have a substantial difference when it comes to CSS classes. There are 5 important styling classes that your browser superimposes on just one link. You have to overwrite each of these classes and in a particular order. Don’t stress, we will go through it together.

CSS Link Classes

  • a:link – sets the standard link styling
  • a:visited – sets the styling for a link that has been previously visited
  • a:hover – when a user hovers over a link, this sets that link’s new style
  • a:active – sets style when link is activated (clicked)
  • a:focus – sets style when the link has focus (often neglected)
Example
<style type=”text/css”>
a:link{color:#09F;}
a:visited{color:#999;}
a:hover{color:#CCC;}
a:active{color:#333;}
a:focus{color:#03F;}
</style>

<a href=”#”>blah blah</a>
Resultblah blah

Ack! I hate this overpowering my link’s classes, but I will bear it just for you on this tutorial. You might also be a little bit freaked out by the sudden by the one line per class formatting. I just did the tight formatting to save space (I am a big fan of wide open formatting and indentations). Can we get to talking about the code? Certainly, let’s use my link to see what’s happening.

In its normal state (a:link), we see it shows a color of #09F. Now, as we hover over it the a:hover class imposes a color of #CCC on the link. Next up, left click and hold it down on the link. This makes a:active take control, which tells the link’s color to turn #333. Now, give it a real click and look at it after the click. a:visited took the reins and said make its color property #999. Last, but not least, we have the less common a:focus. To see it in action try using the tab key to get to the link. You might not have known that this existed, but it most certainly does.

References



Link/cite this page

If you use any of the content on this page in your own work, please use the code below to cite this page as the source of the content.

  • Stewart, Suzy. "Links". After Hours Programming. Accessed on July 1, 2022. https://www.afterhoursprogramming.com/tutorial/css/links/.

  • Stewart, Suzy. "Links". After Hours Programming, https://www.afterhoursprogramming.com/tutorial/css/links/. Accessed 1 July, 2022.

  • Stewart, Suzy. Links. After Hours Programming. Retrieved from https://www.afterhoursprogramming.com/tutorial/css/links/.



0 thoughts on “Links”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.