CSS Link


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

Example

a:link {color:#000000;} /* Link not visited*/
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Move the mouse to the link */
a:active {color:#0000FF;} /* When the mouse is clicked */

  Try It! 

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

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

  • a:active must follow behind 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:

Example

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

Try It! 

Background Color

The background color attribute specifies the link background color:

Example

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

 Try It! 


Examples

More Examples

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

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