Setting the Color of Links using CSS

CSSWeb DevelopmentFront End Technology

CSS allows us to color links. The color property is used to set the color of text in an element.

The order of pseudo selectors is given by:- :link, :visited, :hover, :active.

Syntax

The syntax of CSS color property is as follows −

Selector {
   color: /*value*/
}

Example

The following examples illustrate CSS color property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#demo::after {
   content: " (visited) ";
   font-style: italic;
}
a:link {
   color: lime;
}
a:visited {
   color: green;
}
a:hover {
   color: orange;
}
a:active {
   color: gold;
}
</style>
</head>
<body>
<h2>Demo Links</h2>
<a id="demo" href="">This is demo text 1.</a>
<hr>
<p>
<a href="#">This is demo text 2.</a>
</p>
</body>
</html>

Output

This gives the following output −

On hovering the second link, we get the following output −

On clicking the second link, we get the following output −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: auto;
   font-size: 1.4em;
   background-color: lightseagreen;
   width: 100px;
   text-align: center;
}
a:link {
   color: rebeccapurple;
}
</style>
</head>
<body>
<div>
<a id="demo" href="">Demo link.</a>
</div>
</body>
</html>

Output

This gives the following output −

raja
Published on 09-Jan-2020 10:17:04
Advertisements