Home › CSS › Basic CSS for Links

Basic CSS for Links

I was asked recently how to use CSS to format links on a web page. This is a foundational skill — CSS gives you complete control over how links look in every state. Here's an introductory tutorial to get you started, along with some additional techniques to take it further.

A Real Example: Navbar Links

Let me show you what I did for a recent project. I wanted my navbar links to display as white text with no underline by default, then change to gold text with a navy background on hover. Here's the CSS:

#navbar a:link, #navbar a:visited {
  color: #FFF;
  text-decoration: none;
}

#navbar a:hover {
  color: #FC0;
  background-color: #036;
}

Notice that I've scoped these styles to #navbar — meaning they only apply to links inside the navbar area. If I wanted these styles to apply to every link on the entire page, I'd remove the #navbar selector and just use a:link, a:visited, and a:hover directly. That's a key CSS concept: you can target styles to specific sections of your page, or apply them globally.

The Four Link States

CSS uses pseudo-classes to style links based on their state. The order matters — use the LVHA order:

a:link    { }  /* unvisited link */
a:visited { }  /* previously visited */
a:hover   { }  /* mouse over */
a:active  { }  /* being clicked */

At minimum, style :link and :hover. Styling :visited separately helps users know which pages they've already seen.

Basic Link Styling

a {
  color: #2d4a3e;
  text-decoration: none;
}
a:hover {
  color: #c9943a;
  text-decoration: underline;
}

Removing the underline (text-decoration: none) on default state is common in modern design, but always provide a clear visual change on hover so links are still identifiable as interactive.

Navigation Links

Navigation links are often styled to look less like traditional links:

nav a {
  color: #1e2a25;
  text-decoration: none;
  font-weight: 500;
  padding: .4rem .75rem;
  border-radius: 4px;
  transition: background .2s;
}
nav a:hover {
  background-color: #e8f0ec;
  color: #2d4a3e;
}

Button-Style Links

When you want a link to look like a button:

.btn {
  display: inline-block;
  background-color: #2d4a3e;
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background .2s;
}
.btn:hover {
  background-color: #3d6b5a;
}

Note the display: inline-block — this allows padding to work correctly on an anchor tag.

Link Color Within Content

For links within body text, a color that clearly contrasts with the surrounding text but doesn't shout is ideal. Avoid red for non-error links, and ensure your link color meets accessibility contrast requirements (4.5:1 ratio minimum against the background).

Additional Attributes to Spice Up Your Links

Once you have the basics down, consider adding these properties to your link styles:

• background-image: url(path/to/image) — add a graphic behind the link
• font-family — use a different typeface for navigation links
• font-size — size links differently from body text
• font-variant: small-caps — a polished look for navigation items
• transition — smooth the color or background change on hover
• padding — increase the clickable area around the link text