CSS Links (Links)

Hyperlinks are used to connect from one web resource page to another web resource page.

CSS style links

Links have four different states- link, visited, active, and hover. These four states of a hyperlink can be used with the anchor element'sPseudo-classesDifferent styles are set through CSS properties, depending on their state.

This is related to HTML <a>Mark associated CSS pseudo-classes that can be used to define different styles for different states of hyperlinks.

• a:link Set styles for normal or unvisited links without a mouse pointer.

• a：visited-Sets the style of the link that the user has visited but does not have the mouse pointer.

• a:hover —Sets the style of the link when the user places the mouse pointer on it.

• a:active-Set the style for the link being clicked.

You can specify the CSS properties you want, for example:color,font-family,backgroundetc., with theseSelectRedefine the link style as if you were using plain text.

a:link {　　　　/*　Unvisited Link　　　*/
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited {　　　　/*　Visited Link　*/
　　　　color: #00FF00;
}
a:hover {　　　　/*　Mouse Over the Link　*/
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active {　　　　/*　The Link Being Clicked　　*/
　　　　color: #0000FF;
}

The order of setting styles for multiple link states is important because the last defined priority is higher than the previous CSS code.

Standard Link Style

In all mainstream web browsers, if styles are not specifically set, links on web pages are underlined by default and use the browser's default link color.

For example, the default link color of Gecko-based web browsers (such as Firefox) is- BlueRepresents unvisited,PurpleRepresents visited,RedRepresents the link being clicked.

Set the link color

The following is an example of how to set the link color.

a:link {　　　　/*　Unvisited Link　　*/
　　　　color: #FF0000;
}
a:visited {　　　　/*Visited Link　*/
　　　　color: #00FF00;
}
a:hover {　　　　/*　Mouse Over the Link　*/
　　　　color: #FF00FF;
}
a:active {　　　　/*　The Link Being Clicked　*/
　　　　color: #0000FF;
}

Remove the default underline from the link

text-decoration CSS properties are generally used to remove the default underline from links. The following examples demonstrate how to remove or set text-Properties of Different States of Hyperlinks.

a:link {　　　　/*　Unvisited Link　*/
　　　　color: #FF0000;
　　　　text-decoration: none;
}
a:visited {　　　　/*　Visited Link　*/
　　　　color: #00FF00;
　　　　text-decoration: none;
}
a:hover {　　　　/*　Mouse Over the Link　*/
　　　　color: #FF00FF;
　　　　text-decoration: underline;
}
a:active {　　　　/*　The Link Being Clicked　*/
　　　　color: #0000FF;
　　　　text-decoration: underline;
}