Links are used to connect one page to other web pages. Links with the same color as the rest of the text are difficult to notice. The color property of the CSS is used for changing the color of the links.
By utilizing CSS, we have the ability to customize the appearance of links in various manners. It is possible to define different states for hyperlinks, including:
| a:active | It is used to add style to an active element. |
|---|---|
| a:hover | It adds special effects to an element when the user moves the mouse pointer over the element. |
| a:link | It adds style to the unvisited link. |
| a:visited | It adds style to a visited link. |
It is to be noted that in the CSS definition, a:hover must come after a:link and a:visited and also a:active must come after the a:hover in order to be effective.
The sequence for defining the states of a hyperlink is as illustrated below:
<style type = "text/css">
a:link {color: lightblue;}
a:visited {color: #060235}
a:hover {color: #FCFC0C}
a:active {color: #C0F0FC}
</style>
To modify the color of a hyperlink, the CSS color property must be employed. The color can be specified using various formats like color names, rgb values, or HEX values.
Now, let's explore how to define the color of hyperlinks through a few illustrative instances.
Example
By default, the standard or unvisited links are displayed in blue. In the given instance, we are modifying the default link color by utilizing the color property.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
a{
color: brown;
}
</style>
</head>
<body>
<h1> Welcome to the <a href = "">C# Tutorial </a></h1>
</body>
</html>
Output
Example
In this instance, we are implementing various CSS attributes like font-family, text-decoration, and background-color to style the hyperlinks. By default, the hyperlink is displayed with an underline, hence to eliminate this underline effect, we can utilize the text-decoration property and specify its value as none.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
a{
text-decoration: none;
color: brown;
background-color: pink;
font-family: Arial;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1> Welcome to the <a href = "">C# Tutorial </a></h1>
<p> The text <b>C# Tutorial</b> in the above line is the hyperlink. </P>
</body>
</html>
Output
Example
Now, let's consider another scenario where we modify the color of active and visited links, as well as the color of links on hover. By default, visited links are displayed in purple, and active links are shown in red. We will customize their colors by utilizing the color property along with the pseudo-classes :visited, :active, and :hover.
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
a:visited{
color: lightgreen;
}
a:hover{
color: blue;
}
a:active{
color: red;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1> Welcome to the <a href = "">C# Tutorial </a></h1>
<p> The text <b>C# Tutorial</b> in the above line is the hyperlink. </P>
</body>
</html>
Output
When the software is run, the resulting display will show as follows.
On hovering, the link will look like as follows:
When the hyperlink is active, its color changes to red, as demonstrated below.