Search This Blog

Thursday, June 15, 2006

HTML - change the way links look

In the example below underlining is turned off for all links.

The A:hover tells the browser that when the mouse is over a link the underline should appear.
The hover option only works on MSIE 4+.
(But it does not cause an error on Netscape if you include it - the effect just does not appear.).

<html>

<head>
<title>This is my page</title>
<style type="text/css">
<!--
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline}
-->
</style>

</head>

<body>
Welcome to my world!<br>
<a href="http://viraj-workstuff.blogspot.com/">This Link To My Blog has no underline</a>
</body>

</html>

If you want to turn off the effect for just a single link, add a style property to the <a href> tag:

<a href="http://viraj-workstuff.blogspot.com/" style="text-decoration: none">Go to my blog</a>

You can make multiple style settings instead of just removing the underline.

<html>

<head>
<title>This is my page</title>

<STYLE TYPE="text/css"><!--
A.set1:link {color: #FF00FF; }
A.set1:active {color: #FFFF00; }
A.set1:visited {color: #00FFFF; }

A.set2:link {color: #AA00FF; background: FF00AA; text-decoration: none}
A.set2:active {color: #FF00AA; background: none transparent;}
A.set2:visited {color: #FFFF00; text-decoration: none}
--></STYLE>

</head>

<body>
Welcome to my world!<br>
<a href="http://viraj-workstuff.blogspot.com/" CLASS=set1> My Blog </a>
<a href="http://www.blogger.com/profile/10381021" CLASS=set2> My Profile </a>
</body>

</html>

No comments: