SEARCH
Newsletter
Subscribe to get design tips, latest trends, free stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials Links: No Underline

Links: No Underline

John Pollock Tutorials Mar 01, 2006

You want a link with no underline, or maybe a page full of non-underlined links? Well, let's see how to do it. The first thing to know is that you have to use a style sheet property to do this, so the trick only works in browsers that support style sheets ( NS4 and IE4 for example). With that out of the way, let's take a look at how to create the non-underlined link.

In order to create a non-underlined link, you need to add the style=" " attribute to your link tag. This is where the style sheet property comes in to play. The property we will use is called text-decoration, and we are going to set it so that the text has no decoration (the underline is a decoration). So, the style attribute will look like this:

style="text-decoration:none"

Now, we want to include this attribute in the link tag. So, tack it on after your url with a space in between the two, like this:

<A HREF="http://www.templatemonster.com" style="text-decoration:none">TemplateMonster</A>

Now you will have a link without an underline, like the one below:

TemplateMonster

For an Entire Page of Links

If you want every link on the page to be non-underlined, you can use a style sheet shortcut inside the <HEAD></HEAD> tags of your document. The code looks like this:

<STYLE type="text/css">
<!--
A { text-decoration:none }
-->
</STYLE>

Place this code between your <HEAD></HEAD> tags, and then code your links normally. The style sheet in the head section will make them all non-underlined. So, if you have this:

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
A { text-decoration:none }
-->
</STYLE>
</HEAD>
<BODY>
<P>
<A HREF="http://www.google.com">Google</A>
<P>
<A HREF="http://www.javascriptcity.com">JavaScript City</A>
<P>
<A HREF="http://www.pageresource.com/html/">HTML Pit Stop</A>
</BODY>
</HTML>

All of the links will be non-underlined, and will look like this:

Google

JavaScript City

Pageresource

Wonderful, isn't it? Now you can have underline-free links anywhere you need them. However, non-underlined links may not be recognized as links by your viewers if they haven't seen this effect before. Then again, if the link color stands out or is the default blue, you will probably be O.K. So have fun, and link away! Oh no, did I just write a silly rhyme? Perhaps I'll write another one when I have more time! All right, I think I'd better get going now....

Well, that's all for now (and then some), see you when I write the next section!

subscribe to newsletter