CSS Links


The browsers tend to appear links in blue with an underline by default, and they will change the color of links that have been gone to assist clients to know which pages they have been to.

In CSS, there are two pseudo-classes that permit you to set distinctive styles for joins that have and have not however been gone by.

  • :link used to set styles for links that have not however been gone by.
  • :visited used to set styles for links that have been clicked.

Links can be styled in different ways.

Styling Links

Links can be styled with any CSS properly. Like color, font-family, background, etc.). Special for links is that they can be styled differently depending on their state.

The four links state are:

PropertyDescription
a:link

a normal, unvisited link.

a:visited

a link the user has visited.

a:hover
a link when the user mouses over it.

a:active

a link the moment it is clicked. 

When seeing the style for several link states, there are some order rules:

a: active must come after a: hover

a: hover must come after a: link and a: visited.

Common Link Styles

  • Color

The link text change color depending on what state.

Example

 a:hover{color: #007bb5;}

    a:link{color: #bb0000;}

    a:visited{color: #125688;}

    a:active{color: #55acee;}


  • Text Decoration

The text-decoration property is mostly used to remove underlines from the links.

Example

    a:hover{text-decoration: none;}

    a:link{text-decoration: none;}

    a:visited{text-decoration: underline;}

    a:active{text-decoration: underline;}

 

  • Background Color

The background-color property specifies the background color from the links.

Example

   a:hover{background-color: #125688;}

    a:link{background-color: #09bef0;}

    a:visited{background-color:#bb0000;}

    a:active{background-color:#3b5998 ;}

 

Leave a comment
No Cmomments yet