Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Tutorials
Different link styles on a page
OK, you have fixed your link styles in the CSS of your web page so that all links look the same on the page. You then start to build your design. You have got the perfect colour scheme sorted and then...disaster, you need the links to be a different colour in one div on your page or it just won't look right! A good example of this situation is having a very contrasting footer to the rest of your page. Your main content uses lots of lovely white space where the link styles, in the main CSS, are making the links all black. But your footer is a subtle dark grey where black links are no good at all and you need them to be white. The solution is simple but lots of people don't know how easily this can be done.
Your links CSS probably looks something like this...
a:link {color: #000000; text-decoration: none;}
a:visited {text-decoration: none; color: #000000;}
a:hover {text-decoration: underline; color: #FF0000;}
a:active {text-decoration: none; color: #FF0000;
All you need to do from here is to create some more links styles which are specific to your footer id. For example...
#footer a:link {color: #000000; text-decoration: none;}
#footer a:visited {text-decoration: none; color: #000000;}
#footer a:hover {text-decoration: underline; color: #FF0000;}
#footer a:active {text-decoration: none; color: #FF0000;
The same can be done with classes. As another example you may have a repeating class in a column with a coloured background and you want the links to contrast with the colour whenever the class is used. Your CSS may look something like this...
.box a:link {color: #000000; text-decoration: none;}
.box a:visited {text-decoration: none; color: #000000;}
.box a:hover {text-decoration: underline; color: #FF0000;}
.box a:active {text-decoration: none; color: #FF0000;
Contrasting links on one web page...easy. The one golden rule to remember when styling links is the order they go in; link, visited, hover, active.
