Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Change the Color of Links in HTML?
HTML links are hyperlinks that connect one web page to another. By default, links appear in specific colors: unvisited links are blue and underlined, visited links are purple and underlined, and active links are red and underlined. However, we can customize these colors using CSS to match our website's design.
Syntax
Following is the basic syntax for creating HTML links −
<a href="URL">Link text</a>
To change link colors, we use CSS pseudo-classes with the following syntax −
a:link { color: colorname; } /* Unvisited link */
a:visited { color: colorname; } /* Visited link */
a:hover { color: colorname; } /* Mouse hover */
a:active { color: colorname; } /* Active link */
Default Link Colors
Before customizing, let's understand the default link appearance −
Unvisited link − Blue color with underline
Visited link − Purple color with underline
Active link − Red color with underline (when clicked)
Using CSS Pseudo-Classes
The most common method to change link colors is using CSS pseudo-classes. These target different states of the link −
Example − Custom Link Colors
<!DOCTYPE html>
<html>
<head>
<title>Custom Link Colors</title>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: deepskyblue;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Custom Link Colors Demo</h2>
<p>Visit our <a href="https://www.tutorialspoint.com/">HTML Tutorial</a> section.</p>
<p>Check out <a href="https://www.youtube.com/">YouTube</a> for video tutorials.</p>
</body>
</html>
In this example, unvisited links appear green, visited links are blue, hover state is orange, and active links are yellow. All links have no underline by default except on hover.
Using Inline Styles
You can also change link colors using inline CSS styles directly on the anchor tag −
Example − Inline Link Styling
<!DOCTYPE html>
<html>
<head>
<title>Inline Link Colors</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>About Our Team</h2>
<p>
Our <a href="/about/team.htm" style="color: red; text-decoration: none;">Team</a> comprises of programmers, writers, and analysts.
</p>
<p>
Contact our <a href="/support" style="color: #0066cc; font-weight: bold;">Support</a> department for help.
</p>
</body>
</html>
The inline method applies styles directly to individual links, overriding any default or external CSS rules.
Removing Link Underlines
Many modern websites prefer clean links without underlines. Here's how to achieve this while maintaining hover effects −
Example − Clean Link Design
<!DOCTYPE html>
<html>
<head>
<title>Clean Link Design</title>
<style>
a:link {
color: #2c3e50;
text-decoration: none;
font-weight: 500;
}
a:visited {
color: #7f8c8d;
text-decoration: none;
}
a:hover {
color: #3498db;
text-decoration: underline;
transition: color 0.3s ease;
}
a:active {
color: #e74c3c;
text-decoration: underline;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Navigation Menu</h2>
<p><a href="/">Home</a> | <a href="/tutorials">Tutorials</a> | <a href="/contact">Contact</a></p>
<p>Learn more about <a href="/html">HTML</a> and <a href="/css">CSS</a> programming.</p>
</body>
</html>
This example creates professional-looking links with smooth color transitions and underlines that appear only on hover.
Link Color Methods Comparison
| Method | Scope | Advantages | Best Use Case |
|---|---|---|---|
| CSS Pseudo-classes | All links on page | Consistent styling, supports all states | Site-wide link styling |
| Inline Styles | Individual links | Quick customization, high specificity | Special or one-off links |
| CSS Classes | Selected links | Reusable, organized, flexible | Multiple link styles on same page |
CSS Classes for Different Link Types
For more control, you can create CSS classes for different link types −
Example − Multiple Link Styles
<!DOCTYPE html>
<html>
<head>
<title>Multiple Link Styles</title>
<style>
.nav-link {
color: #2980b9;
text-decoration: none;
font-weight: bold;
}
.nav-link:hover {
color: #3498db;
border-bottom: 2px solid #3498db;
}
.button-link {
color: white;
background-color: #e74c3c;
padding: 8px 16px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
}
.button-link:hover {
background-color: #c0392b;
color: white;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Different Link Styles</h2>
<p>Navigation: <a href="/" class="nav-link">Home</a> | <a href="/about" class="nav-link">About</a></p>
<p>Action: <a href="/download" class="button-link">Download Now</a></p>
</body>
</html>
This approach allows you to have navigation links with one style and call-to-action button links with a completely different appearance.
Conclusion
Changing link colors in HTML is achieved through CSS using pseudo-classes like :link, :visited, :hover, and :active. You can apply styles globally through CSS rules, individually through inline styles, or selectively using CSS classes. This flexibility allows you to create visually appealing and consistent navigation that matches your website's design.
41K+ Views
