Pseudo-classes 2

<p>
  First, take the cursor on the link to see the hover styles take effect.
  Next click on it to see the active styles take effect.
  Notice that the visited styles take effect after you have clicked it once.
</p>
<a href="#1">
  Hover and click
</a>
<br/>
<a href="">
  Visited
</a>

a {
  color: tomato;
}
a:visited {
  color: darkgrey;
}
a:hover {
  color: orange;
  text-decoration: none;
}
a:active {
  color: darkred;
}

Active State vs Focus State