How to Get Rid of a Link Underline in HTML

Removing the underlines from links in HTML documents requires CSS (Cascading Style Sheet) code. You need to use CSS to set the "text-decoration" property of all anchor tags -- the tags that create links in HTML -- to "none" to remove the underlines. When selecting all anchor tags in CSS, you can just use "a" as your selector. You can add this CSS code between "<style>" tags in your HTML file, and this is the quickest and easiest method. When you want to effect only a single tag, you can also place the property and value in the tag itself.

Instructions

    • 1

      Open your Web page in Notepad and locate the "<style>" tags between the "<head>" tags towards the top of the code. Add the "<style>" tags if you do not see them:

      <style type="text/css">

      </style>

    • 2

      Write a CSS selector that selects the tag you want to effect, in this case "a." Use the "text-decoration: none" property-value pair to tell the browser not to display any lines under your links:

      a {

      text-decoration: none;

      }

    • 3

      Remove the underline of a single link within its anchor tag. Use the same "text-decoration: none" property-value pair as you would use in a style sheet:

      <a href="path/to/link.html" title="My Link" style="text-decoration: none;">My Link</a>

    • 4

      Add the underline back to links when users hover over them by adding this code to your style sheet:

      a :hover {

      text-decoration: underline;

      }

Tips & Warnings

  • When removing underlines from links, add a new style to the link that will separate it from regular text, such as "font-weight: bold;" for bold text.

Related Searches:

Comments

Related Ads

Featured