How to Change the Colors for Hyperlink States in Microsoft Expression Web

How to Change the Colors for Hyperlink States in Microsoft Expression Web
Page content

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.

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

File Properties

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

Formatting Tab

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.

Colors of Hyperlink States

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.

State of Original Hyperlink

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.

Preview Hyperlink in Browser

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.

This post is part of the series: Hyperlinks in Microsoft Expression Web

Microsoft Expression Web provides web designers with several options for hyperlink creation, using both text and images. In this series, we’ll explore these methods and offer a few tips on how to get the most out of each one.

  1. Microsoft Expression Web Tutorials: Creating Basic Links
  2. Microsoft Expression Web: Create Custom Buttons for Hyperlinks
  3. Microsoft Expression Web: Modifying Hyperlink Colors
  4. Adding Interactive Buttons to Web Pages with Microsoft Expression Web