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
Selected Reading
Add different styles to hyperlinks using CSS
CSS allows you to apply different styles to hyperlinks using pseudo-classes. You can change colors, fonts, backgrounds, and other properties based on the link's state (unvisited, visited, or hovered).
Syntax
a:link { /* unvisited link */ }
a:visited { /* visited link */ }
a:hover { /* mouse over link */ }
a:active { /* selected link */ }
Pseudo-Class States
| Pseudo-Class | Description |
|---|---|
:link |
Unvisited link (default state) |
:visited |
Link that has been clicked/visited |
:hover |
Link when mouse hovers over it |
:active |
Link at the moment it is clicked |
Example: Different Link Styles
The following example demonstrates how to apply different styles to hyperlinks using CSS classes −
<!DOCTYPE html>
<html>
<head>
<style>
a.first:link {color: #ff0000;}
a.first:visited {color: #0000ff;}
a.first:hover {color: #ffcc00;}
a.second:link {color: #ff0000;}
a.second:visited {color: #0000ff;}
a.second:hover {font-size: 150%;}
a.third:link {color: #ff0000;}
a.third:visited {color: #0000ff;}
a.third:hover {background: #66ff66; padding: 5px;}
</style>
</head>
<body>
<p>Mouse over the below given links:</p>
<p><b><a class="first" href="#">Link changes color</a></b></p>
<p><b><a class="second" href="#">Link changes font-size</a></b></p>
<p><b><a class="third" href="#">Link changes background-color</a></b></p>
</body>
</html>
Three different styled links appear: 1. First link changes from red to yellow on hover 2. Second link increases font size to 150% on hover 3. Third link gets a green background with padding on hover All links turn blue after being visited.
Best Practices
When styling links, follow these guidelines:
- Always define
:linkand:visitedstates for accessibility - Use the LVHA order: Link, Visited, Hover, Active
- Ensure sufficient color contrast for readability
- Provide visual feedback for hover and focus states
Conclusion
CSS pseudo-classes provide powerful ways to style hyperlinks based on their state. Using classes with pseudo-classes allows you to create unique styling for different types of links on your webpage.
Updated on: 2026-03-15T12:13:09+05:30
348 Views
Advertisements