Setting the Color of Links using CSS

CSS Web Development Front End Technology

CSS Online Training

Anadi Sharma

More Detail

Kickstart HTML, CSS and PHP: Build a Responsive Website

Featured

Ogbemudia Terry Osayawe

More Detail

XPath, CSS Selector, Web, DOM, SelectorsHub & TestCase Studio

Best Seller

Sanjay Kumar

More Detail

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>