Links in CSS
? Links in CSS
CSS allows you to style links (<a> elements) in different states to improve usability and visual feedback.
Link States (Pseudo-classes)
| State | Description | Selector Syntax |
|---|---|---|
| Link | Normal, unvisited link | a:link |
| Visited | Link the user has already visited | a:visited |
| Hover | When the mouse is over the link | a:hover |
| Active | While the link is being clicked | a:active |
| Focus | When link is focused (keyboard) | a:focus |
Basic Example
a:link { color: blue; text-decoration: none;}a:visited { color: purple;}a:hover { color: red; text-decoration: underline;}a:active { color: orange;}Important: Link Order
Always write link pseudo-classes in this order to avoid conflicts:
LVHAlink ? visited ? hover ? active
Styling Tips for Links
Use
text-decorationto control underline (e.g.,none,underline).Change color on hover for better UX.
Use
cursor: pointer;to indicate clickable.Avoid only color change for accessibility — consider underline or bold.
Use
focusstyles for keyboard navigation accessibility.
Example: Stylish Navigation Links
nav a { color: #333; padding: 8px 12px; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease;}nav a:hover,nav a:focus { background-color: #f0f0f0; outline: none;}Want me to help you build a complete styled navigation menu or explain how to make accessible links?
