Friday 15 March 2013

Specify a different link colour on a specific part of a webpage

This is a very useful tutorial I just found which tells you how to specify a different link colour on a specific part of a webpage, (when all your - a:link a:visited  a:hover a:active link rules are already set)

http://www.adesdesign.net/blog/tutorials/css/having-different-link-colors-on-one-page/


Normally for this, (because I am lazy) I just settle for changing the link colour using a simpleton dumb person method...   Like this...


<a href="http://www.somethingorother.com/somethingelse.html"><FONT COLOR="#0000000">This is a link to something or other</font></a>


However...  with my favoured lazy option, you don't get to choose a hover mouse over colour or any of that jazz. I can cope happily with this under normal circumstances, but this time round I was using some sort of javascript thingy which played havoc with my lazy method and a turdy brown link on top of a blue background will just not do....   no, no, no....

Thankfully I found this tutorial which uses css to achieve the specific link colour...

Here is my test example, as demonstrated a whole lot better on the tutorial link I provided at the beginning of this post.




<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Different Color Links</title>

<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>
</head>
<body>
<table width="100%"  border="0" cellspacing="0" cellpadding="20">
<tr>
<td align="center" bgcolor="#FFFF00"><a href="#">Link 1</a> </td>
</tr>
<tr>
<td id="footer" align="center"  bgcolor="#666666"><a href="#">Link 2</a> </td>
</tr>
</table>
</body>
</html>


No more turdy brown links over blue for me....  no, no, NO!

No comments:

Post a Comment