FAQ: Removing underline from links

Question:

I want to remove the underline from my hyperlinks.  How can I do that?

Answer:

The look and feel of your hyperlinks can be controlled using Styles.  You will perform different steps depending on whether you want to edit one or two links, or whether you want to affect all the links on your whole website.

To remove the underline from a specific link:

1. Edit the hyperlink by highlighting a portion of it (a letter or two is fine) and clicking the Hyperlink button .

2. In the "Style" box, type:
   
   text-decoration: none

3. Click OK.

You can add other styles if you like, such as color styles (color: colorname).  If you add more than one style to the Style box, remember to separate the different styles with semicolons.  For example, here's what to type in the "Style" box to remove underlines, recolor to green, and bold:

text-decoration: none; color: green; font-weight: bold

Notice that each style is separated from the next with a semicolon.

To remove the underline for all hyperlinks in your web site:

Any time you want to apply styles to your entire website, you need to modify your site's stylesheet.  To learn more about stylesheets, please see the Stylesheets section of Help.  (Keep in mind that you may need to request access to your stylesheet, and that you are assuming quite a bit of responsibility in editing it.)

In particular, you will want to add a line such as this to your global stylesheet:

a {text-decoration: none}

You can also get more precise control over your hyperlink behavior by separately modifying the four states a hyperlink can be in: link (where the hyperlink has not been clicked on), hover (when you roll your mouse over a hyperlink), active (when you actually click or select a hyperlink, or you go back to a page where a hyperlink was clicked), and visited (when the person has clicked on the link already).  Here is an example of four styles that override the color and underline values for the four different states:

a:link { color: #EA6908; text-decoration: none }
a:visited { color: #753504; text-decoration: none; }
a:hover { color: #929DAA; text-decoration: underline; }
a:active { color: #929DAA; text-decoration: none; }

You can even add background colors and other formatting to links using styles.  Feel free to experiment with different styles to achieve the hyperlink look you want.