CSS Links

CSS Styling Links

HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.).

Example

Example Code

css

Try it Yourself

a {

  color: hotpink;

  background-color: yellow;

  font-weight: bold;

}

Styling Links Depending on State

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

The four link states are:

:link - a normal, unvisited link

:visited - a link the user has visited

:hover - a link when the user mouses over it

:active - a link the moment it is clicked

When setting the style for link states, there are some order rules:

:hover must come after :link and :visited

:active must come after :hover

Example

Example Code

css

Try it Yourself

/* 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;
}

CSS Links - Text Decoration

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

Example

Example Code

css

Try it Yourself

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

CSS Links - Background Color

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

Example

Example Code

css

Try it Yourself

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
}

More Examples

Example

Example Code

css

Try it Yourself

a.one:link {color:red;}
a.one:visited {color:blue;}
a.one:hover
  {color:orange;}

a.two:link {color:red;}
a.two:visited {color:blue;}

  a.two:hover {font-size:150%;}

a.three:link {color:red;}

  a.three:visited {color:blue;}
a.three:hover {background:lightgreen;}

a.four:link {color:red;}
a.four:visited {color:blue;}
a.four:hover
  {font-family:monospace;}

a.five:link {color:red;text-decoration:none;}

  a.five:visited {color:blue;text-decoration:none;}
a.five:hover
  {text-decoration:underline;}

Example

Example Code

html

Try it Yourself

Live Output Preview:

CSS Styling Links

Example

Example Code

Styling Links Depending on State

Example

Example Code

CSS Links - Text Decoration

Example

Example Code

CSS Links - Background Color

Example

Example Code

More Examples

Example

Example Code

Example

Example Code

Interactive Code Examples

CSS Example 1

CSS Example 2

CSS Example 3

CSS Example 4

CSS Example 5

CSS Example 6