CSS Links
CSS lets you style HTML links for every state — unvisited, visited, hover, and active. Styling links improves usability and makes navigation visually engaging through colors, underlines, and smooth hover effects.
The Four Link States
:link
An unvisited link — default state.
:visited
A link the user has already clicked.
:hover
When the mouse is over the link.
:active
While the link is being clicked.
CSS Link Syntax
a:link { color: #1a73e8; text-decoration: none; }
a:visited { color: #6a1b9a; }
a:hover { color: #d81b60; text-decoration: underline; }
a:active { color: red; }
Link Styling Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Links</title>
<style>
body { font-family: Arial; padding: 30px; }
a {
text-decoration: none;
padding: 8px 14px;
border-radius: 6px;
transition: all .3s ease;
}
a:link { color: #1a73e8; background: #e3f2fd; }
a:visited { color: #6a1b9a; background: #f3e5f5; }
a:hover { background: #1a73e8; color: #fff; }
a:active { background: #0d47a1; }
</style>
</head>
<body>
<a href="https://pbainst.in">Visit PBA Institute</a>
</body>
</html>
Code Explanation
text-decoration: none: Removes the default underline.- Order matters: Define states in the order :link, :visited, :hover, :active (LVHA).
transition: Animates color/background changes smoothly.border-radius: Creates pill-shaped buttons.
Link Pseudo-classes
| State | When It Applies | Typical Use |
|---|---|---|
:link |
Unvisited link | Primary brand color |
:visited |
Already clicked | Subtle, secondary color |
:hover |
Mouse over link | Color change, underline, scale |
:active |
During click | Pressed effect |
:focus |
Keyboard focus | Accessibility outline |
Introduction
CSS allows developers to style HTML links using properties like color, text-decoration, hover, visited, active, and focus states to create attractive and interactive navigation.
Link Color Example
The color property changes the text color of hyperlinks.
<style>
a{
color:tomato;
}
</style>
Text Decoration Example
The text-decoration property styles the underline of links.
<style>
a{
text-decoration:underline;
color:tomato;
}
</style>
Conclusion
CSS link styling improves website navigation, accessibility, and user experience by creating interactive and visually attractive hyperlinks.
Common Link Styles
Underline Links
Default style — clear visual cue for clickable text.
Button-style Links
Use background, padding, and radius for CTA buttons.
Animated Links
Add transitions for smooth color or underline animations.
Link Style Properties
Important Notes
- LVHA order: Always define link states in
:link, :visited, :hover, :activeorder. - Don't break focus styles: Always keep a visible
:focusstyle for keyboard users. - Use transitions: Smooth color changes feel professional.
- Avoid all-caps links: Hard to scan visually.
Real-World Use Cases
Navigation
Style links in navbars to feel like buttons.
Inline Links
Underline inline links in articles for clarity.
CTA Buttons
Convert anchor tags into styled call-to-action buttons.
Practice Questions
- Remove the underline from all anchor tags on a page.
- Style a link with a blue background and white text on hover.
- Create a button-style link with padding and rounded corners.
- Add a smooth color transition using the transition property.
- Explain the LVHA order of link pseudo-classes.
Frequently Asked Questions
- How to remove underline from links: Use
text-decoration: noneon the anchor tag. - Why is link order important: Browsers apply later rules over earlier ones — the LVHA order ensures all states work correctly.
- How to make a link look like a button: Add padding, background, border-radius, and remove the underline.
- How to animate a link: Use the
transitionproperty for smooth color or background changes.
Conclusion
CSS link styling makes navigation intuitive and visually appealing. By styling each state with the LVHA order and adding smooth transitions, your links feel both professional and accessible.
CSS All Topics
Continue Learning
Previous
Go to Fonts Chapter