CSS Links

CSS Links

With CSS, links can be styled in different ways.

Example 1: Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example 2: Text Decoration

The text-decoration property is mostly used to remove underlines from links.

Example 3: Background Color

The background-color property can be used to specify a background color for links.

Example 4: Link Buttons

This example demonstrates a more advanced link where we combine several CSS properties to display links as boxes/buttons.

Example 5: Link States

The four links states are:

• 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;
}