Links can be styled with any CSS property, such as color, font-family, font-size, and padding. Here is an easy example:

a {
    color: hotpink;
}

In addition, links can be styled differently depending on what state they are in.

Links also have 4 states, and many programmers style each state differently. The four states are:

  • a:link: an unvisited, unclicked link
  • a:visited: a visited, clicked link
  • a:hover: a link when the user’s mouse is over it
  • a:active: a link when it is clicked

The <a href=""> property is responsible for creating URLs and can be modified using a number of CSS styling properties, although it has a few by default:

  1. Underline
  2. Blue color

You can change these by adding changing the color and text-decoration properties.

   color: black;
   text-decoration: none;

You can also style the link based on interaction using these properties, also known as link states:

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Here is some sample CSS using the 4 states:

a:link { color: red; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: blue; }

Note that there are some ordering rules for when you are setting the style for link states.

  • a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

More on styling in CSS: