Latest web development tutorials

CSS link (link)

Different links may have different styles.

Link Style

Style links, you can use any CSS properties (such as color, font, background, etc.).

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

The four link states are:

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

Examples

a: link {color: # FF0000;} / * unvisited link * /
a: visited {color: # 00FF00;} / * visited links * /
a: hover {color: # FF00FF;} / * move the mouse to the link * /
a: active {color: # 0000FF;} / * mouse click * /

try it"

When set to a number of link-state style, there are some rules of order:

  • a: hover must follow the a: link and a: visited later
  • a: active must follow a: hover behind

Common link style

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

Let's look at some other common ways to link style:

Text-decoration

text-decoration attribute is mainly used to remove the underlining on links:

Examples

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

try it"

background color

Background color property specifies the background color of the link:

Examples

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

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

Advanced - Create Links box
This example demonstrates a more advanced example, we combine a number of CSS properties appear as boxes.