Styling Links

Links on a web page are made through an anchor (a) element:

<a href="newpage.html">Go to New page</a>

When we’re styling them in addition to styling the basic a element you can also style different states of the link:

• visited: what it looks like when someone has already cliked the link before
• hover: what it looks like when the mouse is over the link before it’s clicked
• active: what it looks like when it’s being clicked

To style these states you use a pseudo selector by adding a colon and the name of the state.

Below are all of the basic selectors you need to style links. Change the colors to match the color you want for your links. I’ve left out active since it’s only there for a short time and not essential to style, but feel free to style it if you want.

/* == LINK Styling ==== */
a, a:visited, a:hover{
  text-decoration: none; /*removes underline in all states*/
}
a{
  color: #0033ff;
  border-bottom: 1px solid #0033ff; /*adds in border instead of underline, make sure to match color of text */
}
a:hover{
  color: #005599;
  border-bottom: 1px solid #005599; /*adds in border instead of underline, make sure to match value given for "color" */
}
a:visited{
  color: #880099;
  border-bottom: 1px solid #880099; /*adds in border instead of underline, make sure to match value given for "color"*/
}