Having Different Link Colors on One Page

by: Ades Tynyshev

Having different link colors on one page

Do you want to have a different color links on different sections of your website? If your answer is yes then you have come to the right tutorial. Often websites have different color backgrounds on different sections of their website, for example content section of your website might have a white background, in contrast footer section might have a darker background color. Problem arises when you have links on the footer, default link-color is blue therefore it might not be very visible on the darker background. Luckily there is a way to solve this problem with CSS which we are going to do next.

First create a new page and Save it as 2LinkColor.html (or anything), then create a CSS style inside this page that will define the link color for the page, in this example we have set the link colors to red. Therefore all the links in this page will be red, regardless of their positon.
<STYLE TYPE="text/css">

</STYLE>

You need to put the above code between <Head></Head> tags in your page's source code like this:

Now let's create a table with 2 rows and 1 column, set the first row background to yellow and second row background to dark gray. And create a sample links inside each row. (Just imagine that the second row with dark gray background is your footer section of the page). See Example

As you see from the example, red link on yellow background is very visible, however the link on gray background is not-so-visible-and-readable. Our next task will be to create a seperate CSS style for the second link.

What we are going to do next needs some planning if you are going to have many links with different colors in one page. Since our footer section will be inside the table cell in second row, we are going to apply the CSS style to the whole cell where our footer resides. Let's create a CSS style for the footer.
<STYLE TYPE="text/css">

</STYLE>

Add the red lines to your CSS, as shown above. Here we are declaring a new style that says "Make all the links in the table- cell called 'footer' to white".

Now we need to go to the source code, and set the ID of the table cell where our second link resides to id="footer".
<table width="100%" border="0" cellspacing="0" cellpadding="20">
<tr>
<td align="center" bgcolor="#FFFF00"><a href="#">Link 1</a> </td>
</tr>
<tr>
<td align="center" bgcolor="#666666" id="footer"><a href="#">Link 2</a> </td>
</tr>
</table>

Just add the code in red to the source code of your table (make sure you add the code to the right cell, notice that we are adding to the cell where Link 2 resides).

We are done, view your page and voila the second link became white! See Example

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.

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.