CSS Links

Different links can have different styles.

Link styles

Link styles can use any CSS properties (such as color, font, background, etc.).

Particular links can have different styles, depending on what state they are in.

The four link states are:

  • a:link - normal, unvisited links
  • a:visited - links that the user has visited
  • a:hover - when the user's mouse is over the link
  • a:active - the moment the link is clicked

Example

a:link {color:#000000;} /*Unvisited link*/ a:visited {color:#0080FF;} /*Visited link*/ a:hover {color:#FF00FF;} /*Mouse over the link*/ a:active {color:#0000FF;} /*On mouse click*/

Try it Yourself »

When setting styles for several link states, there are also some order rules:

  • a:hover must come after a:link and a:visited
  • a:active must come after a:hover

Common link styles

According to the above example of link color changes, see what state it is in.

Let's move on to some other common ways to style links:

Text Decoration

The text-decoration property is mainly used to remove the underline from links:

Example

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

Try it Yourself »

Background color

The background-color property specifies the background color of links:

Example

a:link {background-color:#8CC6FF;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Try it Yourself »

Examples

More Examples

Add hyperlinks with different styles
This example demonstrates how to add other styles to hyperlinks.

Advanced - Create Link Box
This example demonstrates a more advanced example, where we combine several CSS properties to display as a box.

other extensions