CSS: Additional Hyperlink styles

This entry is part 9 of 26 in the series Basic CSS

There are 3 additional hyperlink styles that we can use.

  • focus: This is used by links that are selected by using the keyboard.
  • hover:  This is used to change the appearance of a link the the mouse is positioned over it.
  • active: This is used for a link when it is clicked. This is momentarily and immediately after being clicked, the link changes to the visited state.
<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <style type='text/css'>
        a:link {
            color: navy

        a:visited {
            color: magenta

        a:hover {
            color: lime

        a:active {
            color: red

<a href='//nytimes.com'>Click Me</a>

Series Navigation<< CSS: Applying styles to hyperlinks
CSS: Specifying a font family >>