CSS Links

In this chapter we will explain how we can give styles to links, how to make links more beautiful.

The link has these four states:

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

We will speak about these properties:

Text Decoration

As you remember when we create a link, by default it is underlined. When we want to remove it we must use text-decoration property.

Let's see the example.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a> This is some link.</a>
  </body>
</html>

Let's explain the meaning of our code.

Here you can see that our link in its first and second state will be without underline. The link is underlined when the user mouses over it and when a link is clicked in the moment.

You can check it in your browsers with your editors or with our online editor click here and go to the page of the editor.

These styles can be written in either the <head> section or in css file that you will use for your webpage.

Color

The color property we use for the color of the link.

For example when we want our link to be black and to be #1c87c9 in its 3rd state (a:hover) we need to write the following

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a> This is some link.</a>
  </body>
</html>

Background Color

What can we do if we want our link to be with background?

We just need to give a style with background-color property.

For example our link will be with gray background and in the hover it will be #1c87c9.

When the first (a:link) and the second (a:visited) states have the same background color we can write just <a>.

Let's see the code.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a> This is some link.</a>
  </body>
</html>

You can choose your preferable color with the Color Picker.