CSS Links

Different links can have different styles.

Link style

The style of the link can use any CSS properties (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 that 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 ; } /* Unvisited link */ a :visited { color: #00FF00      
 ; } /* Accessed link */ a :hover { color: #FF00FF  
 ; } /* Move the mouse to the link */ a :active { color: #0000FF  
 ; } /*When mouse clicks */

When set to several link state styles, there are also some order rules:

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

Common link styles

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

Let’s go to link styles in some other common ways:

Text decoration

The text-decoration attribute is mainly used to remove the underline in the link:


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

background color

The background color attribute 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
 ; }

More examples

Adding different styles of hyperlinks
This example demonstrates how to add other styles to hyperlinks.

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