If you've been on the internet for a few years you might be able to remember a time when text links were all identified by their blue color with underlines. Now, thanks to CSS, most links are customized to match the color and style of the website they are on, and you can follow the trend.

All of the CSS properties that can be applied to fonts (as well as most properties that can be applied to text) can also be applied to links, allowing you to determine the family, size, color, weight, style, and decoration of your links. The possibilities are endless; there are five different styles of links on this website alone. Can you find them?

a {
  color: red;
  font-size: 14px;
  text-decoration: underline;
}


As seen by the example above, the link selector can easily be styled according to your preference using properties that we have already learned. What we now need to learn are several effects called "pseudo-classes" that are unique to links and allow different styles to be applied to links in different states. There are four states that a link can be in.

link	link has not been clicked and the mouse pointer is not hovering over it
visited	link has been clicked and the mouse pointer is not hovering over it
hover	mouse pointer is currently hovering over link
active	link is being clicked as we speak (read)

It is important to keep these four states in the order they are listed above, as this is the correct order to create a functional link.

Pseudo-classes are added to the link selector, separated by a semicolon. Any properties and values specified in one of these pseudo-classes will apply only to the links that meet the states described by the pseudo-classes.

a {
  color: #6633FF;
  font-size: 14px;
  text-decoration: underline;
}

a:visited { color: #006699; }
a:hover { text-decoration: none; color: FF9966; }
a:active { color: #FFFF99; }


Applying the code above will produce this colorful little link: Wanna see a picture?