TechNote (Archived)

How to remove the underline from linked text

Create hyperlinks that do not have underlined text

Standard HTML convention places an underline on text that has been wrapped in anchor tags, so that the user receives the feedback that the text is linked to another file. Modify > Page Properties provides a dialog box that allows for the selection of the color that all hyperlinks on the page will be displayed. However, the Page Properties dialog box does not provide a means for the the developer to turn off the underline attribute. If you wish to delete the default underline, you may do so by redefining the attributes associated with the anchor tags on a specific page.

Note: Macromedia Dreamweaver MX 2004 does allow you to dictate underline appearance within the Page Properties dialog box. You may want to try the method described in this TechNote for altering individual hyperlinks.

Here is an example of underlined linked text.

Redefine an anchor tag

Open the existing HTML document with linked text in Dreamweaver.
Open the CSS Styles panel (Window > CSS Styles) and click the New CSS Style button. This is straightforward in most versions of Dreamweaver, but in Dreamweaver 3 and 2, you will actually have to click other buttons:
- Dreamweaver 3: Launch the Edit Style Sheet window by selecting the Open Style Sheet... button, then select the New button to create a new style.
- Dreamweaver 2: Launch the Edit Style Sheet window by selecting the Edit Style Sheet button on the bottom of the Styles palette, then select the New button to create a new style.
In the New Style dialog box, select the second radio button, labeled Redefine HTML tag. From the pop-up menu, choose the "a". The "a" corresponds to the <a> anchor tag. Click OK.

Note: This screen shot is from an older version of Dreamweaver, but the option in all versions is self-explanatory.
The Style definition dialog box appears. The attributes set in this window will format any linked text on the page, because it will affect any characters that are surrounded by anchor tags.
This is an example of a hyperlink, in source code:
<a href="http://www.macromedia.com">Macromedia</a>
Choose the category Type to affect the text. To remove the underline, simply select the box next to None under the heading of Decoration. The decoration of a hyperlink has a default underlined style, but selecting None removes the setting. You may select any of the other checkboxes to format the decoration of linked text on the page. For example you may choose a specific size, style, color and font. Click OK when finished, to close the Style definition box. Then click Done to close the Edit Style Sheet window.
Keep in mind that any attributes that are set to redefine an HTML tag will affect all the text on the page that is surrounded by that particular tag. Styles make it easy to affect a specific set of text on the page. This can be very useful, especially if changes need to be made.

Options to create a page that contains both underlined and plain text hyperlinks

Create a custom class CSS style. This method is described inCreating multiple link styles (TechNote 15350).
1. In an open document, open the CSS Styles panel and choose to create a new style
2. In the New Style dialog box, select the first radio button, labeled Class or Custom.
3. Type a name in the Name text box (you will see this box instead of the pop-up menu you saw in the earlier steps). The name must not contain any spaces or unusual characters. Custom classes always begin with a period, but Dreamweaver will add that for you.
4. Choose the category Type to affect the text. To remove the underline, simply select the box next to None under the heading of Decoration.
5. Click OK
6. In the document, select a hyperlink.
7. With the hyperlink selected, apply the custom style to the hyperlink. In Dreamweaver MX 2004, you can do this by choosing the style from the Style pop-up menu in the Property inspector. For other versions, you can most easily apply the custom style from the CSS Styles panel.
  
  The following code is an example of how this might look. In this example, the custom style was called "nounderline":
  
  <a href="http://www.macromedia.com"class="nounderline">Macromedia</a>
Another strategy allows specific links on a page to be altered without generating a CSS style. Removing the underline from just one link on a page requires hand coding the HTML source code.

Note: This does not make best use of CSS styles, and will prove to be harder to maintain and update.
1. In the on open document, locate a hyperlink in the Design window.
2. Choose View > Code to launch the Code view. Older versions of the application will launch the Code Inspector to edit the code directly. The code will look like the following:
  
  <a href="http://www.macromedia.com">Macromedia</a>
3. Type in the code highlighted in red, to make this hyperlink display without an underline:
  
  <a href="http://www.macromedia.com">Macromedia</a>
  
  Conversely, if it is desired to display the majority of the links on a page with plain text, but a few with underlines, follow the steps above to redefine the anchor tag to remove the underlines. Then, highlight the links that should be underlined and add the code highlighted in red to the anchor tag:
  
  <a href="http://www.macromedia.com">Macromedia</a>

Note: In versions of Dreamweaver after version 3, use the Quick Tag Editor to quickly inspect and edit the HTML source of a single tag from within the Document window, without having to open the HTML inspector. The easiest way to access the Quick Tag editor is to press Ctrl + T (Windows) or Command + T (Macintosh).