Links can be displayed in four different ways across all web browsers:
Unvisited hyperlink: An unvisited hyperlink refers to a link that has not been clicked. Its default color is blue.
Accessed hyperlink: When a link is clicked, it becomes a visited link and its default color is purple.
Clickable Link: A link that is currently enabled for interaction upon being clicked is referred to as a clickable link. By default, it is visually denoted by the color red.
Link Hover Effect: A link that changes its appearance when the mouse cursor hovers over it is referred to as a hover link. The text color of the link remains constant when it is being hovered over. If the mouse hovers over a visited link, its color will match that of a visited link. Likewise, when hovering over an unvisited link or an active link, the color will match that of an unvisited or active link respectively. It is possible to customize the color of hover links by using HTML and CSS.
To modify the colors of link states in HTML, we can utilize the "style" attribute. By applying the "color" property, we can specify the desired color for the link.
To modify the color of a hyperlink by utilizing an inline style attribute for redirection purposes, the following steps should be adhered to in order to achieve the desired outcome. By following these instructions, it is possible to seamlessly adjust the link's color.
To begin, the initial step involves entering the HTML code into a text editor or accessing an already existing HTML file in the preferred text editor to incorporate the "style" attribute for modifying the color of a link.
<!DOCTYPE html>
<html>
<head>
<title>
Change the link color using the style attribute
</title>
</head>
<body>
This page helps you to understand how to change the link color using the style attribute.
<br>
Click <a href="">here</a> to move to the home page of our site.
</body>
</html>
Step 2: Next, position the cursor inside the initial anchor tag for which the link color adjustment is desired. Subsequently, insert the inline style attribute within the tag.
Click <a href="" style="">here</a>
Step 3: Next, we need to input the color property within the style attribute and define the specific color name that we wish to display.
Click <a href="" style="color:red">here</a>
Step 4 involves saving the HTML file and subsequently executing it.
<!DOCTYPE html>
<html>
<head>
<title>
Change the link color using the style attribute
</title>
</head>
<body>
This page helps you to understand how to change the link color using the style attribute.
<br>
Click <a href="" style="color: red">here</a> to move to the home page of our site.
</body>
</html>
The outcome of the HTML code provided above is displayed in the screenshot below:
CSS properties provide the ability to alter the color of links.
Below are some instances demonstrating the alteration of link color through CSS attributes:
Example 1:
In this instance, we will assign a pink hue to a link that has not been visited, a coral shade to a link that has been visited, a green tint to an active link, and a magenta tone to a link when hovered over.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Link colors</title>
<style>
a:link {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: coral;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: magenta;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: green;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>We can alter the colors of the links using the color CSS property.</p>
<a href="#link" target="_blank">HTML link</a>
</body>
</html>
Output:
Unvisited link in pink color:
Hover link in magenta color:
Visited link in coral color:
Active ink in green color:
Example 2:
In this instance, we'll make use of the CSS "color" attribute to assign specific colors to different states of a hyperlink. We will set the color to orangered for unvisited links, lime for visited links, seagreen for active links, and darkred for hover links.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Changing link colors utilizing CSS</title>
<style>
a:link {
color: orangered;
}
a:visited {
color: lime;
}
a:hover {
color: darkred;
}
a:active {
color: seagreen;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<a href="#link" target="_blank">Click here!!</a>
</body>
</html>
Output:
Unvisited link in orangered color:
Hover link in darkred color:
Visited link in lime color:
Active link in seagreen color:
Conclusion:
In this article, we have understood how to change link color in HTML. The following are some points to remember:
- The "style" attribute is utilized and specified "color" property inside it to give color to the link.
- The <style> tag is utilized and a CSS property called "color" is defined inside the <style> tag to provide link color.