Links; Not Underlined

Everywhere on the web I looked, more and more sites looked much better when their links were NOT underlined, so I set out to find out just how that was being done. Turns out it was just a simple CSS code at the beginning of any html page that made it all happen.

You can remove them easily by adding the following code between the

code:
<head>

and

code:
</head>

tags, in your page.

Sample CSS code to create non-underlined links

code:
<head>
<style type="text/css">
<!--
  a:link { text-decoration:none }
  a:visited { text-decoration:none }
  a:hover { text-decoration:none }
  a:active { text-decoration:none }
-->
</style>
</head>

Underline ONLY when cursor hovers over link

Next, if you want the links to underline only when your readers move their mouse over to them, (like the links on pages of this site) then try this:

code:
<head>
<title>Test Links</title>
<style type="text/css">
<!--
  a:link { text-decoration:none }
  a:visited { text-decoration:none }
  a:hover { text-decoration:underline }
  a:active { text-decoration:none }
-->
</style>
</head>

Note: this effect only works in Netscape 4.0+ and IE 3.0+

Finally, if you ever wondered how to get more than one link colour on a single web page, here's an article that you might find useful.

TOP

Do you like the new design?

 Yes

 No

 Don't know