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. 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

Visited hyperlink (a:visited)

A hyperlink that has already been followed

Hovered-over hyperlink (a:hover)

A hyperlink that the pointer is currently hovering over

Active hyperlink (a:active)

A hyperlink that is currently selected

Important

Hyperlink states must appear in this order in the cascading style sheet in order for all states to be effective.

For information about hyperlink pseudo-classes, see Pseudo-classes.

To change the appearance of hyperlinks in one or more web pages, you can define the hyperlink styles either in an internal cascading style sheet in each web page or in an external cascading style sheet 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 cascading style sheet and then attach the external cascading style sheet to those web pages than to define the styles in an internal cascading style sheet in each web page.

When you want only to define the color of hyperlinks in a single web page, you can use either the New Style dialog box or the Page Properties dialog box. Both methods use cascading style sheets, but the New Style dialog box enables you to define the styles in an external cascading style sheet that you can attach to multiple web pages, whereas the Page Properties dialog box can define the styles only in an internal cascading style sheet.

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.

For more information, 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 cascading style sheet 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 cascading style sheet, 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 panel, 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 clicked.

  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 cascading style sheet, you must attach the .css file to the web pages that you want to use the style.

    For more information, 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.48af3fbb-ac2e-4c03-be0f-48deffb294f6(en-us,Expression.40).png in the Common toolbar, and then select a color.

See also

Tasks

Create or modify a hyperlink
Change the frame targeted by a hyperlink
Create a cascading style sheet

Concepts

Cascading style sheet reference

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.