How to Change Link color in Html

HTML Link Colors are used to visually distinguish different types of links on a web page and provide users with visual cues as to the state of a link. The purpose of using link colors is to make the website more user-friendly and easily navigable.

The default color of an unvisited link in HTML is blue, and a visited link is typically purple. However, web developers can change the color of links to match the design of their website or to convey a specific message.

By changing the color of links on a webpage, web developers can help users quickly identify different types of links, such as links to external websites, links to email addresses, or links to downloadable files.

Hover colors are used to highlight a link when a user hovers over it, providing feedback that the link is clickable. Additionally, active link colors are used to indicate a link that has been clicked on and is currently being viewed.

Different Types of Hyperlinks

There are three different types of hyperlinks that can be styled using CSS: unvisited, visited, and active links.

Unvisited Links:

Unvisited links are the default state of links on a web page. When a link is first added to a web page, it is considered unvisited. By default, unvisited links are usually displayed as blue text, but their color can be changed using CSS. Unvisited links are used to indicate a link that a user has not clicked on yet.

<a href="https://example.com">Unvisited Link</a>

If you want to change the color of unvisited links, you can use the following CSS code:

<a href="https://example.com" style="color: red;">Unvisited Link</a>
run this source code Browser View
Unvisited Link

In the above code, the a:link selector is used to target unvisited links, and the color property is set to red.

Visited Links:

Visited links are links that a user has clicked on and visited previously. Visited links are displayed in a different color than unvisited links, usually purple by default, but can be changed using CSS. The purpose of visited link styling is to help users remember which links they have already clicked on, making it easier to navigate the website.

<a href="https://example.com">Visited Link</a>

If you want to change the color of visited links, you can use the following CSS code:

a:visited { color: green; }
run this source code Browser View
Visited Link

In the above code, the a:visited selector is used to target visited links, and the color property is set to green.

Note that the ability to style visited links is restricted for security reasons. Browsers prevent websites from accessing the browser's history to check whether a link has been visited or not, in order to protect users' privacy.

Active Links:

Active links are links that are currently being clicked on by the user. The active link state occurs between the time a user clicks on a link and the moment the web page loads. Active links can be styled using CSS to provide feedback to the user that the link has been clicked on and is in the process of loading. Here is an example of a link in its active state:

<a href="https://example.com">Active Link</a>

If you want to change the color of active links, you can use the following CSS code:

a:active { color: orange; }
run this source code Browser View
Active Link

In the above code, the a:active selector is used to target active links, and the color property is set to orange.

Conclusion:

The purpose of HTML link colors is to help users easily identify different types of links on a web page and provide visual cues about the state of a link, making the website more user-friendly and accessible.