A visitor wrote to ask how she could "remove the underline from links" on her web page. Since she didn't specify the web editor (or perhaps the blog software) that she was using, I will show how this is done in a generic way, with CSS, so that it is useful regardless of software.
You should preferably have some HTML and CSS knowledge before reading this article, otherwise some of the things said here will be difficult to understand. At the very least, you will need to know how to insert CSS and HTML into a web page.
text-decoration
Property
The CSS property that handles underlining is text-decoration
. By default, this is set to
underline
for links. To stop all links from being underlined, add the following rule to your style sheet:
If you only want certain links not to be underlined (such as those in your navigation menu),
but want the rest to appear as they normally do, set the rule only
for the links in that class
or id
. For example, the navigation menu
created by the free Navigation Menu
Wizard has the following rule to prevent the links on the buttons from being underlined.
The rule only suppresses the underlining of links in items belonging to the #tswcssbuttons
list.
It is coded in this very specific manner, on an id
that is unlikely to conflict with any that you
may create yourself, so that you can use the menu on your website with peace of mind, knowing that
the rule will not spill over and inadvertantly affect your normal links.
If you only have one link where you want the underlining removed, you can put the rule directly in the
style
attribute of that link.
The above example code will result in a link that looks like this: thesitewizard.com. As you can see, removing the text decoration only stops it from being underlined. All the other styles affecting the link, such as its colour ("color" if you use a different variant of English), remain the same.
This rule is supported by all modern browsers. In fact, it will probably even work in many obsolete ones, including the extinct (or so I hope) Internet Explorer 6.
Copyright © 2018-2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Remove the Underlining from Links (HTML/CSS)