W3docs
en
Log in

CSS Links

To style links with CSS use the following properties: text-decoration, color, background color. See examples.

In this chapter, we will explain how to style links and make them more visually appealing.

The link has these states:

  • a:link - a normal, unvisited link
  • a:visited - a link that the user has already visited
  • a:hover - a link when the user hovers over it
  • a:active - a link at the moment when it is clicked
  • a:focus - a link that has received keyboard focus

We will cover these properties:

Text Decoration

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

Example of using the text-decoration property to style a link:

CSS links text-decoration examples

<!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 href="#"> This is some link.</a>
  </body>
</html>
Try it Yourself »

Let's explain the meaning of our code.

Here you can see that the link in its first and second states will be without an underline. The link is underlined when the user hovers over it or clicks it.

You can check it in your browser using your editors or our online editor.

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

Color

We use the color property to set the color of a link.

For example, if we want our link to be black by default and #1c87c9 in its third state (a:hover), we need to write the following:

CSS links color examples

<!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 href="#">This is some link.</a>
  </body>
</html>
Try it Yourself »

Result

Color Property

Background Color

What can we do if we want our link to have a background?

We just need to apply the background-color property.

For example, our link will have a gray background, and on hover, it will change to #1c87c9.

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

CSS links background-color examples

<!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 href="#">This is some link.</a>
  </body>
</html>
Try it Yourself »

You can choose your preferred color using the Color Picker.

Practice

Practice

What properties are used in CSS to modify the appearance of links?