Having Different Link Colors on One Page

By Ades Tynyshev
2005-05-31


Second way of doing this

Above we have applied the css style to the whole table cell, applying css to the table cell can save us time in converting all the links in that particular table cell to one color (in our example we have turned them to white). However I would like to show you the second way, applying to individual links separately one by one. This might be useful if you have only one link in the page to be different color than the rest.

<style type="text/css"> <!-- a.linkStyleName:link {color: red; } a.linkStyleName:visited {color: red; } a.linkStyleName:hover {color: red; } a.linkStyleName:active {color: red; } --> </style>

As you see the structure of the style is pretty straightforward, a(dot)your link style name(colon)link state

And this is how you apply the style to the link, just add class="linkStyleName" inside the link code as shown below:

<a href="http://www.google.com" class="linkStyleName">Google</a>

Feel free to change the color of the link states (link, hover, visited, active). To keep the tutorial simple I used only one color for all four states.  

Tutorial Pages:
» Having different link colors on one page
» Second way of doing this

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » CSS Shorthand Properties » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS