More Web Design Tutorials

Styling Different Links Differently with HTML and CSS

March 22, 2011

On a website, you often have different groups of links that may not all supposed to be looking the same. Usually, you’ll have navigation links and possibly some links within your content at a minimum. The post Styling Links with CSS shows how to style links in general. But how do you get your navigation links to look different than your content links and those different than your footer links (for example)?

Pretty simply, actually!

It will require some HTML and CSS coordination/cooperation, but then, that’s how everything on the site works anyway. So if you style your links just like this:

a:link {color: red;
background: yellow;
}
 
a:visited {
color: yellow;
background: red;
}
 
a:hover {
color: blue;
background: green;
}

(Note – It’s better to use hex-colors, but for this demonstration, color names make things more obvious. And we could also style the link for the active and focus status, but that is not relevant for the purpose of this tutorial.)

So if we add the above to our CSS, all the links in the entire document will look the same – like so.

To create the distinction, I’m adding the ID of ‘navigation’ to the navigation. To see the html for the sample page and for any webpage in your browser, right-click anywhere on your site, and ‘View Source” should be an option available in the drop-down your right-click provides. The footer already has an ID of ‘footer’, and the links in the content, we’ll leave alone. And we add to the above CSS this:

#navigation a:link {color: pink;
background: purple;
}
 
#navigation a:visited {
color: purple;
background: pink;
}
 
#navigation a:hover {
color: white;
background: teal;
}
#footer a:link {color: yellow;
background: black;
}
 
#navigation a:visited {
color: black;
background: aqua;
}
 
#navigation a:hover {
color: red;
background: silver;
}

And there you go ….