Having Different Link Colors on One Page

By Ades Tynyshev
2005-05-31

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.

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.

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".

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

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

| Write For Us

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