CSS Links

Links can be styled and decorated in different ways using CSS. There are different properties to styled Links which are listed :

  • link: It show unvisited hyperlinks.
  • active: It signifies an element on which the user is currently clicking.
  • hover: It show an element/text in the state when a user currently has the mouse over.
  • visited: It show the visited hyperlinks.

There are some order rules for setting the style of link state.

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

To Set the Color of the link

Color of the link can be changed . Possible values could be any color name in any right format.The following example shows how to set the link color.

Example :a:link{color:red;}
Output :link

To change the Color of the visited link

Color of the visitd link can be changed . Possible values could be any color name in any right format.The following example shows how to set the link color.

Example :a:visited{color:green;}
Output :link

Change the Color of Links when Mouse is Over

Color of the link when a user bring mouse over the link can be changed . Possible values could be any color name in any right format.The following example shows how to set the link color.

Example :a:hover{color:hotpink;}
Output :link

To Change the Background Color of Links when Mouse is Over

Color of the link when a user bring mouse over the link can be changed . Possible values could be any color name in any right format.The following example shows how to set the link color.

Example :a:hover{background-color:orange;}
Output :link

Example

Try It Yourself