• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Matt Doyle | Elated Communications

Web and WordPress Development

  • About Me
  • Blog
    • Design & Multimedia
      • Photoshop
      • Paint Shop Pro
      • Video & Audio
    • Online Marketing
      • E-Commerce
      • Social Media
    • Running a Website
      • WordPress
      • Apache
      • UNIX and Linux
      • Using FTP
    • Web Development
      • HTML
      • CSS
      • JavaScript
      • PHP
      • Perl and CGI Scripting
  • Portfolio
  • Contact Me
  • Hire Me
Home / Blog / Web Development / CSS / Styling Links with CSS

Styling Links with CSS

18 August 2008 / Leave a Comment

CSS gives you a fair amount of flexibility when it comes to styling links. You can alter the look of:

  • normal links
  • links that have already been visited
  • links that are being clicked on, and
  • links that are hovered over with the mouse.

You can even turn text links into image links, using nothing but CSS. In this article you learn how to change the look of different link states using CSS, as well as how to alter link colours, underlining, and appearance in general.

Different link states

CSS distinguishes between 4 different states for a link using a concept called pseudo-classes. A pseudo-class is a way of selecting page elements based on special characteristics such as whether an element is being rolled over with a mouse, or whether the element has focus.

Here are the 4 pseudo-classes that you can use to select and style the different link states in CSS:

a:link
Selects links that have never been visited in the browser
a:visited
Selects links that have been visited before in the browser
a:active
Selects links that are being clicked on or otherwise activated by the user
a:hover
Selects links that are being hovered over by the user’s mouse cursor

Selecting links regardless of their state

As well as using pseudo-classes to select particular link states, you can of course use the a selector on its own to select links in general:


a { color: pink; } /* Set all links to pink */

However, note that using a pseudo-class overrides any styling that you’ve set using the a selector. For example, the following code makes all links pink except visited links, which become green:


a { color: pink; }
a:visited { color: green; }

Mixing pseudo-classes with classes and ids

You might want to style only certain types of links within your website. To do this, assign a class to the links:


<a class="nav">Home</a>

You can then style those links using pseudo-classes as follows:


/* Make all navigation links red when hovered over */
a.nav:hover { color: red; }

If you only want to style a single link on the page, you can use an id instead of a class, and select the link’s pseudo-classes in the same way — for example:


<a id="home" href="home.html">Home</a>

...

/* Make the "home" link yellow, whether visited or not */
a#home:link, a#home:visited { color: yellow; }

Some examples

Once you’ve selected the particular link state you’re interested in, you can apply any styles you want to that state, as you’ll see in the following examples.

Styling link colours

It’s easy to change the colour of links from the default values. On most browsers, the default link colours are:

:link
blue
:visited
purple
:active
red

Here are some examples of how to change link colours:



/* Make all links grey on black, whatever their state */
a { color: gray; background-color: black; }

/* Use the default colours except for links that are being
   clicked on, which become yellow instead of red */
a:active { color: yellow; }

/* Set unvisited links to green; visited and hovered
   links to brown */
a:link { color: green; }
a:visited, a:hover { color: brown; }
Use caution when changing link colours. Most visitors expect normal links to be a shade of blue, visited links to be a shade of purple, and links generally to be underlined. If you deviate too wildly from these standards then visitors may have a hard time navigating your site.

Turning off underlines on links

To remove the underlining from text links, use the text-decoration property, as follows:


a { text-decoration: none; }

To remove the underlining from links except when they’re hovered over, use:


a { text-decoration: none; }
a:hover { text-decoration: underline; }

Giving links a button effect

You can style links — and their pseudo-classes — pretty much any way you like. This example turns a standard text link into something more closely resembling a form button:


a
{
  color: #000;
  background-color: #f0f0f0;
  padding: 2px 11px;
  border: 2px outset #fafafa;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9em;
}

Here’s what it looks like:

link

Adding background images to links

Here’s another example of styling a link purely using CSS. It adds an arrow graphic to the link by inserting the graphic as a background image and moving the link text to the right to allow space for the image:


a
{ 
  background: #fff url('red-recessed-arrow.gif') no-repeat 0 0;
  padding: 3px 0 4px 34px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
}

And here’s how it looks:

link

Replacing link text with an image

What if you wanted to use just an image for a link, without any text? It’s a good idea to keep the link text in your HTML markup, so that non-graphical browsers and search engines can still read and understand the link. However, you can still hide the link text within your CSS. Here’s how it’s done.

First, put your link text within a span element in your markup:


<a href="home.html"><span>Home</span></a>

Then you can style the link as follows:


a
{
  background: #fff url('remote-control-home.gif') no-repeat 0 0;
  display: block;
  width: 114px;
  height: 24px;
}

a span
{
  display: none;
}

First the CSS sets the button as a background image on the link, and adjusts the link’s width and height to match the dimensions of the image. Then the a span selector ensures that the link text is hidden from CSS-aware browsers.

Here’s how the above example looks:

link>

Why the display: block? Well, links are inline elements, which means that (amongst other things) you can’t apply certain properties such as width and height to them. If you want to specify a width and height for a link, you first need to make it display as a block-level element using the display: block property.

Creating image rollover effects

Finally, if you really want to go to town with your links, you can add nice-looking image rollovers to them. Find out how to do this in Making CSS rollover buttons.

Filed Under: CSS Tagged With: background-image, button, cascading style sheets, clicked, hover, image links, mouseover, none, text-decoration, underline

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

To include a block of code in your comment, surround it with <pre> ... </pre> tags. You can include smaller code snippets inside some normal text by surrounding them with <code> ... </code> tags.

Allowed tags in comments: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre> .

Primary Sidebar

Hire Matt!

Matt Doyle headshot

Need a little help with your website? I have over 20 years of web development experience under my belt. Let’s chat!

Matt Doyle - Codeable Expert Certificate

Hire Me Today

Call Me: +61 2 8006 0622

Stay in Touch!

Subscribe to get a quick email whenever I add new articles, free goodies, or special offers. I won’t spam you.

Subscribe

Recent Posts

  • Make a Rotatable 3D Product Boxshot with Three.js
  • Speed Up Your WordPress Website: 11 Simple Steps to a Faster Site
  • Reboot!
  • Wordfence Tutorial: How to Keep Your WordPress Site Safe from Hackers
  • How to Make Awesome-Looking Images for Your Website

Footer

Contact Matt

  • Email Me
  • Call Me: +61 2 8006 0622

Follow Matt

  • E-mail
  • Facebook
  • GitHub
  • LinkedIn
  • Twitter

Copyright © 1996-2023 Elated Communications. All rights reserved.
Affiliate Disclaimer | Privacy Policy | Terms of Use | Service T&C | Credits