CSS Tutorial
CSS Links
Links are the heart of the web, and CSS lets you style them to match your design. Beyond changing colour, you can restyle each of a link's four states and even turn a link into a button.
Styling links
A hyperlink is created with the anchor element <a>. By default browsers show unvisited links in blue with an underline and visited links in purple. You can override all of this with CSS, most simply by targeting the a selector for colour and text-decoration.
The four link states
A link can be in one of several states depending on what the user is doing. CSS provides a pseudo-class for each so you can style them separately.
| State | Pseudo-class | Meaning |
|---|---|---|
| :link | a:link | A link the user has not visited yet |
| :visited | a:visited | A link the user has already visited |
| :hover | a:hover | The mouse pointer is over the link |
| :active | a:active | The link is being clicked right now |
Order matters. Write the states as LoVe HAte: :link, :visited, :hover, :active. If :hover comes before :link or :visited it may be overridden and appear to do nothing.
Styling all four states
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
a:link { color: #2563eb; }
a:visited { color: #7c3aed; }
a:hover { color: #dc2626; text-decoration: underline; }
a:active { color: #16a34a; }
</style>
</head>
<body>
<p>
Hover, click, and hold this
<a href="https://example.com">example link</a>
to watch its colour change.
</p>
</body>
</html>Removing the underline
The text-decoration property controls the underline. Setting it to none removes the line; you can bring it back only on hover to keep links discoverable.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
a { text-decoration: none; color: #0f766e; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<p>No underline until you <a href="#">hover this link</a>.</p>
</body>
</html>Making a link look like a button
Because <a> is an inline element, add display: inline-block so padding, background, and borders apply neatly. This is a popular way to build call-to-action buttons.
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
.btn {
display: inline-block;
padding: 12px 22px;
background: #2563eb;
color: white;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s;
}
.btn:hover { background: #1d4ed8; }
</style>
</head>
<body>
<a href="#" class="btn">Apply now</a>
</body>
</html>Key points
- Links have four states: :link, :visited, :hover, and :active.
- Write link pseudo-classes in the order :link, :visited, :hover, :active.
- Use text-decoration: none to remove the underline; keep some visual cue so links stay obvious.
- Add display: inline-block to style a link as a padded, coloured button.