How to Change Link Styles with Page Properties in Dreamweaver

By Janine Warner

If you’re like many designers who use Dreamweaver, you probably don’t like the underline that automatically appears under all the linked text in a web page. It’s really easy to remove that underline and change the color, font, and size of your links with Dreamweaver’s Page Properties dialog box. You can also change other page-wide settings, such as the background color and page margins, from the Page Properties dialog box.

The easiest way to alter all your link styles at once is to change them in the Page Properties dialog box. When you use this option, Dreamweaver creates the corresponding tag selector styles automatically and lists them in the CSS Styles panel. Other page-wide settings in this dialog box work similarly, and you can edit all these options by using the CSS tools.

To change hyperlink and other styles with the Page Properties dialog box, open an existing page or create a new one and follow these steps:

  1. Choose Modify→Page Properties.

    Alternatively, you can click the Page Properties button in the Property inspector. The Page Properties dialog box appears.

  2. On the left of the Page Properties dialog box, select the Links (CSS) category.


  3. Specify a font and size for your links.

    If you want to use the same font size and face for your links as you use in the rest of the text on your page, it’s best to leave these options blank. Then, if you change the text settings for the page, you won’t have to remember to change them for your links as well.

  4. Specify colors for each hyperlink state by clicking the corresponding color well and selecting a color from the Color dialog box.

    You can change any or all link color settings. If you don’t specify a link color, the browser uses the default link color. Here’s an explanation of each of the four link states:

    • Link Color: The color in which your links appear when the page is first loaded and the linked page hasn’t yet been visited by the browser. The corresponding HTML tag is <a:link>.

    • Visited Links: The color your links change to after a browser has already viewed the linked page. The corresponding HTML tag is <a:visited>.

    • Rollover Links: The color a link changes to as a user rolls a cursor over a link. The corresponding HTML tag is <a:hover>.

    • Active Links: The color a link changes to as a user is actively clicking a link. The corresponding HTML tag is <a:active>.

  5. Select a style from the Underline Style drop-down list.

    By default, links displayed in a web browser are underlined. Many designers prefer to remove the underline that automatically appears under linked text by choosing Never Underline. You can give visitors the visual cue of the underline, but only as they roll a cursor over a link, so choose the option Show Underline Only on Rollover option.

  6. Click OK.

    The Page Properties dialog box closes, the style settings are applied automatically to any links on the page, and the corresponding styles are added to the CSS Styles panel.

To fully test link styles, preview your page in a web browser or click the Live View button at the top of the workspace. It’s good practice to test link settings in a browser when you make changes like the ones in the preceding exercise. Take a look at how your links appear.

For example, check whether the active and visited link colors look good against the background color of the page. Remember that any styles you create using the Page Properties dialog box affect all links on your page unless you specifically apply a different style to an individual link that overrides the redefined tag style.

If you want to use different link styles in different parts of the same page, you can create compound styles to create different link styles.