CSS Links

Different links can have different styles.

Styling Links

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

Link style

The style of the link can be any CSS property (such as color, font, background, etc.).

Special links can have different styles, depending on their status.

The four link states are:

  • a: link-Normal, unvisited link
  • a: visited-the link the user has visited
  • a: hover-when the user mouses over the link
  • a: active-the moment the link is clicked


a : link { color: # 000000 ; } /* Links not visited */ a : visited { color: # 00FF00 ; } /* Links visited */ a : hover { color: # FF00FF ; } /* Mouse over link */ a : active { color: # 0000FF ; } /* With a mouse click */
Try it yourself »

When set to the style of several link states, there are some order rules:

  • a: hover must follow a: link and a: visited
  • a: active must follow a: hover

Common link styles

Based on the example of the color change of the link above, see what state it is in.

Let's go to the link style in some other common ways:

Text decoration


text-decoration attribute is mainly used to remove underscores in links:


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 link background color:


a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
Try it yourself »