Share via

Change the appearance of a hyperlink

  • Article

You can control the appearance of a wide variety of hyperlink properties including color, font size and font family by defining styles in a cascading style sheet (CSS). In addition, you can assign properties to different hyperlink states, such as a visited hyperlink or a hyperlink with a pointer hovering over it.

Hyperlink states

Hyperlink (a:link)

A hyperlink that has not been selected

Active hyperlink (a:active)

A hyperlink that is currently selected

Visited hyperlink (a:visited)

A hyperlink that has already been followed

Hovered hyperlink (a:hover)

A hyperlink that the pointer is over

To change the appearance of hyperlinks in one or more web pages, you can either define the hyperlink styles in an internal CSS in each web page or in an external CSS that you must attach to each web page. If you want multiple web pages to use the same hyperlink styles, it's more efficient to define the styles in an external CSS and then attach the external CSS to those web pages than to define the styles in an internal CSS in each web page.

When you only want to define the color of hyperlinks in a single web page, you can either use the New Style dialog box or the Page Properties dialog box. Both methods use CSS, but the New Style dialog box enables you to define the styles in an external CSS that you can attach to multiple web pages, whereas the Page Properties dialog box can define the styles only in an internal CSS. To use the New Style dialog box, see the procedure "To change the appearance of hyperlinks"; to use the Page Properties dialog box, see the procedure "To change only the color of hyperlinks in a single page.".

Tip

To change the appearance of a single hyperlink in a web page, select the hyperlink, and create an inline style that defines the properties you want. See Create a style.

  1. To choose the location of the hyperlink styles, do one of the following.

    • To add hyperlink styles to an internal CSS in a web page, which are only applied to hyperlinks in that page, open the web page in Design view or Code view.

    • To add styles to an external CSS, which can be attached to one or more web pages, open the .css file or create a new one. For more information, see Create a cascading style sheet.

  2. In the Apply Styles task pane, click New Style.

  3. In the New Style dialog box, in the Selector box, select one of the following:

    Use this

    To do this

    a

    Set the default appearance of a hyperlink.

    a:active

    Set the appearance of a hyperlink when clicked.

    a:hover

    Set the appearance of a hyperlink when the pointer is over the hyperlink.

    a:link

    Set the appearance of hyperlinks that haven't been clicked.

    a:visited

    Set the appearance of hyperlinks that have been

  4. In the Category box, set the properties you want for any of the following:

    Use this

    To do this

    Font

    Set font properties including size, weight, decoration and color.

    Block

    Set line-height, text alignment, text indentation, and text spacing.

    Background

    Set background color and background image properties.

    Border

    Set a border and its properties.

    Box

    Set the padding and margin properties of box and block-level elements.

    Position

    Set the dimensions and position of box and block-level elements.

    Layout

    Set the visibility, floating and wrapping behavior, clipping and other layout properties of box and block-level elements.

  5. Click OK.

    Note

    If the hyperlink style is in an external CSS, you must attach the .css file to the web pages that you want to use the style. See Attach or detach an external cascading style sheet.

To change only the colors of hyperlinks in a single page

  1. Open the web page in Design view or Code view.

  2. On the File menu, click Properties.

  3. In the Page Properties dialog box, click the Formatting tab.

  4. Under Colors, in the Hyperlink, Visited hyperlink, Active hyperlink, and Hovered hyperlink boxes, select the colors you want to use.

  5. Click OK.

  1. Open the web page in Design view or Code view.

  2. Select the hyperlinked characters that you want to modify.

  3. Click the arrow on the Font Color button Cc294936.7d82a39a-24b2-44b2-9c48-b4b40a414535(en-us,Expression.10).gif in the Common toolbar and then select a color.

See also

Concepts

Create or modify a hyperlink

Change the frame targeted by a hyperlink

Create a cascading style sheet