WWW FAQs: How do I make links with no underline?

2006-06-28: the underline underneath links is easily removed using a style sheet. If you are using style sheets, you can specify no underline using this code in your .css file:

a { text-decoration: none; }

The links will still be distinguished by color. You may also wish to distinguish them by font.

If you do not have a separate style sheet file, you can do this in the <head> portion of your page like so:

<head> <style type="text/css"> a { text-decoration: none; } </style> </head>

However it is usually more convenient to create one style sheet file, named stylesheet.css, in the top directory of your web space and use it in each of your pages by adding this element to the <head> section of the page:

<link rel="stylesheet" href="/stylesheet.css" type="text/css">

For a slightly more sophisticated look, consider bringing back the underline only when the mouse pointer is hovering over the link. Try this in your style sheet:

a:hover { text-decoration: underline; } a:link { text-decoration: none; } a:visited { text-decoration: none; }

You don't have to apply this style to all of your links. You can easily make it specific to <a> elements within <div>, <span> or <p> (paragraph) elements that have a particular <class> attribute. In the style sheet, do this:

.nounder a { text-decoration: none; color: black; }

And in the page, do this:

<p class="nounder"> All of the <a href="somewhere">links within this paragraph</a> will have no underlines. </p>

Share |

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!