Jump to content

How To Remove The Underlining From A Link?


Radeon
 Share

Recommended Posts

Specifically, you want to be looking at the text-decoration property of the anchor elements.

/* In the CSS */.link_class {text-decoration: none;}/* In the HTML */<a class="link_class" href="google.com">Click To Go To Google</a>

Note that you wouldn't in this case have to set up a specific CSS definition for .link_class:hover, because the .link_class here already covers it. If you want underlines only when a mouse hovers over it, then you would need something like this in the CSS

.link_class:hover {text-decoration: underline;}

Check out the text-decoration CSS property here.W3Schools Text Decoration

Link to comment
Share on other sites

Usability guidelines would suggest that most Interweb users expect the links to be underlined. Removing the underlines might confuse those who view your pages.
Might be, but instead of a official page, I'm designing a own homepage.Don't ask me how.But thanks anyway, you helped a lot!
Link to comment
Share on other sites

As Radeon seems to have his answer, I hope I'm not being rude to add a supplementary question:I am wanting to add a link...ok there I'm just looking at the tutorials...but in light of this thread, does an underline appear on every link as default? Does it depend on the CSS code on the page?Thanks,Mark.

Link to comment
Share on other sites

i believe the underline is a browser default. just as i believe its the same reason why images used as links have blue borders around them.

Edited by thescientist
Link to comment
Share on other sites

On my websites, I usually use two basic CSS properties to change how my links look. To style your links in a CSS document:

a:link, a:visited {				  color: #code;				  text-decoration: underline, none, etc.;}a:hover, a:active {				  color: #differentcode;				  text-decoration: underline, none, etc.;}

Then in my HTML file I would type up:

<html><head><style type="text/css" rel="Stylesheet" href="style.css" /></head><body><a href="www.example.com/example.html" title="title of page">Example</a></body></html>

The HTML file would then grab the external CSS file, read the code and recognize the link formatting. Now, let me break it down for you:a:link - The formatting for how the text is displayed when the page is first openeda:visited - The formatting for how the text is displayed after the link has been clicked ona:hover - The formatting for how the text is displayed when the mouse is rolled over the linka:active - For simpler browsers, the "active" attribute is almost a exact replica of "hover"You can also use the class attribute to do multiple styles of links.Ex. :

a.title:linka.title:visiteda.title:hovera.title:active

<html><body><a class="title" href="" title="">Example</a></body></html>

Basically, to remove the underlining from a link, there are two ways to do it. One, if you are only going to be formatting one link:

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

And then use what I showed towards the end with the "class" attribute. You can name the class whatever you want and you can have as many as you like!I hope this helped! :)

Link to comment
Share on other sites

If you want to grab some simple CSS codes for link formatting from another website without having to create your own, download this file:One of my website's CSS documentsYou have to scroll to the very bottom to see it, because I have my containers and font styles at the top.Good luck!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...