Having Different Link Colors on One Page
By Ades Tynyshev2005-05-31
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"> <!-- a:link { color: red; } a:visited { color: red; } a:hover { color: red; } a:active { color: red; } --> </STYLE> |
You need to put the above code between <Head></Head> tags in your page's source code like this:
| <html> <head> <STYLE TYPE="text/css"> <!-- a:link { color: red; } a:visited { color: red; } a:hover { color: red; } a:active { color: red; } --> </STYLE> </head> <body> |
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"> <!-- a:link { color: red; } a:visited { color: red; } a:hover { color: red; } a:active { color: red; } td#footer a:link {color: white;} td#footer a:visited {color: white;} td#footer a:hover {color: white;} td#footer a:active {color: white;} --> </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
Tutorial pages:
|
|
|||||||||
You might also want to check these out:
|
Link to This Tutorial Page!
