How to Remove the Underlining from Links (HTML/CSS)

How to change links so that they are no longer underlined


How to Remove the Underlining from Links (HTML/CSS)

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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.

The 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:

a:link {
  text-decoration: none ;
}

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.

#tswcssbuttons li a {
  text-decoration: none ;
}

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.

Suppressing Underlining for the Odd Link

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.

<a href="https://www.thesitewizard.com/" style="text-decoration: none;">thesitewizard.com</a>

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.

Compatibility

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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Remove the Underlining from Links (HTML/CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.