Simple CSS: Removing the Underline from Links

by David Rodriguez — Feb 13, 2008

We frequently get responses and e-mails from viewers, and I see it requested all the time in user forums and elsewhere around the web: how do you remove the underline from links in your Web page?

First Method: Inline Style

The first way to do this would be to apply a style attribute to your links containing the CSS property "text-decoration." Like so:

 <a href="link-to-page-here.html" style="text-decoration: none;">Link text here!</a> 

This will create a link with no underline, but it will only affect that link, so you'll need to apply the style attribute to each link that you want to appear without an underline.

Second Method: CSS Declarations in the Header

In the <head> section of your page, you can declare CSS that will affect the entire page. If you want all of your links to appear without an underline, you'd put this in the head section of your page:

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

So, overall, the top part of your HTML might look something like this:

 <html>
<head>
<title>This is the title of my page!</title>
<style type="text/css">
a { text-decoration: none; }
</style>
</head>
<body>
Rest of your content goes here....

Now, every <a> tag on your page will have its underline removed and there's no need to include the style attribute in each individual link.

There's a lot more to learn about CSS than just what's here, but I figured this short article would help some people out. It's a good way to get your feet wet with styling your page with CSS.

If you'd like to learn more, read CSS From the Ground Up.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float