How to Styling Different Links in CSS
Apr 28, 2012, by admin
On a website, you frequently have different groups of links that may not all presumed to be looking the same. Usually, you’ll have navigation links and perhaps 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 need 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 good to use hex-colors, but for this display, 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 peculiarity, 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 presents. 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;
}
