Setting the Color of Links using CSS
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 −
Published on 09-Jan-2020 14:47:04
