Radeon Posted October 22, 2009 Share Posted October 22, 2009 Hi,I'm searching for help about how to remove the underlining from a link. Could someone give me some good advice? Link to comment Share on other sites More sharing options...
Ingolme Posted October 22, 2009 Share Posted October 22, 2009 CSS will do the trick. Please read the tutorial before simple copying and pasting code. Link to comment Share on other sites More sharing options...
Shonumi Posted October 22, 2009 Share Posted October 22, 2009 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 More sharing options...
jlhaslip Posted October 22, 2009 Share Posted October 22, 2009 Usability guidelines would suggest that most Interweb users expect the links to be underlined. Removing the underlines might confuse those who view your pages. Link to comment Share on other sites More sharing options...
Radeon Posted October 23, 2009 Author Share Posted October 23, 2009 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 More sharing options...
Mark H Posted October 26, 2009 Share Posted October 26, 2009 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 More sharing options...
thescientist Posted October 26, 2009 Share Posted October 26, 2009 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. Link to comment Share on other sites More sharing options...
Synook Posted October 27, 2009 Share Posted October 27, 2009 Default styling - http://www.w3.org/TR/CSS2/sample.html Link to comment Share on other sites More sharing options...
how2html Posted November 2, 2009 Share Posted November 2, 2009 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 More sharing options...
how2html Posted November 2, 2009 Share Posted November 2, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.