- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 −
<!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
<!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 10:17:04
- Related Questions & Answers
- Setting Text Color using CSS
- Setting the Location Color Stops using CSS
- Set the Color of links with CSS
- Setting up Background Color using CSS
- Set the Color of Visited Links with CSS
- Change the Color of Active Links with CSS
- Setting the element's text color using CSS
- Setting Color Property in CSS
- How to change the color of active links with CSS
- How to change the color of focused links with CSS
- Setting up Background Color in CSS
- Setting Text Color Working with CSS
- Setting the shape of the radial gradients using CSS
- Setting the size of the radial gradients using CSS
- Removing the Links Default Underlines using CSS
Advertisements