Microsoft Expression Web: Modifying Hyperlink Colors

Changing the color of most types of text in Expression Web is fairly simple and only involves using the Font Color tool on the main toolbar. Hyperlinks present a slightly different challenge, since there are several states for any given hyperlink, and each of these states can be depicted using a different color. In fact, if you try to use the standard font tools to change the color of a hyperlink, you can end up with an annoying problem where your underline color does not match your text color.

In this tutorial, we will cover how to change hyperlink colors in Expression Web, but first we want to list the four different hyperlink states recognized in the web design application.

• Hyperlink – This is the original state of a hyperlink on a web page before any action, such as clicking, has been performed.
• Visited Hyperlink – This is the state of the hyperlink after it has been clicked. Often, web designers choose to represent this state in a different color to allow users to know which links have already been viewed.
• Active Hyperlink – This is the state of the hyperlink as it is being selected by the user. Most people don’t notice this state because they click links rather quickly. However, if you click on a link and continue to hold down the mouse button without releasing it, you’ll be able to view this state.
• Hovered Hyperlink – This is the state of the hyperlink as it is being moused over. This state is visible when the mouse pointer is hovered over the hyperlink.

We’ll start with a hyperlink that has already been created as seen in the screenshot below. If you’re looking for information on how to create new links, take a look at Part 1 of this series.

click to enlarge

To begin, choose Properties from the File menu on the main Expression Web toolbar.

click to enlarge

This action will bring up the Page Properties dialog box. Navigate to the Formatting tab within this box.

click to enlarge

On this tab, you will see the four hyperlink states described in the previous section. Use the dropdown list next to each state to modify its color. For our example, we will choose some colors that match our web page template.

click to enlarge

When you’re finished, click OK to save your choices and exit the Page Properties dialog box.

After you’ve done this, the hyperlink on the design page in Expression Web will change to whatever color you chose for your basic Hyperlink color.

click to enlarge

The best way to test the changes you made to the colors of the other hyperlink states is to preview your web page in a web browser. To do this, choose Preview in Browser from the File menu, and select the browser you wish to use.

click to enlarge

Once the web page has loaded in your browser, try invoking all of the hyperlink states to make sure the colors are showing up as you had planned.

For more tips and tricks, browse through the collection of Expression Web tutorials found here at Bright Hub.