CSS: How to make links not underlined..

This is a simple tutorial that shows you how to remove underlines and add mouse over colors to links using Dreamweaver MX and CSS.

This tutuorial shows you how to remove underlines from links using Dreamweaver MX.

Open Window --> CSS Styles (shift F11)
Select New Style (The page with a plus symbol icon at the bottom of the panel)
Next in type select "Use Css Selector."
Then Define in this Document Only.
Go back to the top and select a:link and press ok
Now the style definition box will open and type in if you want to specify a font and color. At the bottom select the check box beside none for decoration.
You should see this in the head of your document
<style type="text/css">

</style>
Go back to step 2 and this time select a:visited. Which means what the link will look like after it has been visited. Use any properties you would like for visited links. I usually use the same as a:link this way they look the same.
Repeat step 2 again with a:hover. Which is what the link will look like when the mouse goes over it. On this choose underline for the decoration so your links will have an underline.
Repeat step 2 one more time This time with a:active. As you can probably guess this formats what the text will look like when the link is clicked.
Now make a link on your page. Just make sure your style links are in this order:

<html>
<head>
<title>Underline Links</title>
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p><a href="http://www.68designs.com">My Link that is not underlined</a></p>
</body>
</html>

Comments

Great

September 15, 2004 by Natalee Tjernlund

Finally, after browsing 5 different sites and not understanding what they are trying to teach me, someone put it so simply even I could understand it!
So now even a newbie like me can work with text-decoration for links!
Thank you!!

You must me logged in to write a comment.