CSS Basics CSS structure / syntax CSS Text CSS font CSS links CSS Images CSS Tables Css Position layout

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