• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 3. Creating Links > Specifying Link Colors

Specifying Link Colors

You can specify the default color of text links on your page in order to be consistent with the set of colors you have chosen to use in your document. The colors you select should contrast, but not clash, with the background so the links can be read clearly. The link color should also stand out from the regular body text in the document, enabling viewers to spot the links easily. Browsers will display the colors you set for links—unless the option to override a page's colors is checked in the user's browser preferences. You will use the same dialog box to choose these colors that you used when selecting the default text color in Lesson 1.

Open the into.html document, located in the Lesson_03_Links folder. Choose Modify > Page Properties to open the Page Properties dialog box.

In this dialog box, you can define colors for three link types:

Links: The initial color a user sees before clicking the link. The standard default browser color for a link is blue.

Visited Links: The color that a link changes to if a user clicks the link. The standard default browser color for a visited link is purple.

Active Links: The color to which a link turns if a user holds down the mouse button after clicking the link. The standard default browser color for an active link is red. Some pages use the same color for Active Links as they do for Links.

Use the text fields next to the color boxes to select the colors for your links by typing in #660000 for the Links color, #CC3300 for the Active Link color, and #333333 for the Visited Links color.

When you know the hexadecimal values of your colors, you can enter the numbers directly in these text fields. Dreamweaver automatically fills in the color box with the matching color swatch. On the other hand, if you choose a color swatch from the palette, Dreamweaver automatically fills in the text field with the hexadecimal value. You can click the color box to bring up the palette, as you did in Lesson 1, and the hexadecimal value will be displayed at the top of the palette as you rollover the color swatches.


The number sign (#), also known as a pound sign, indicates that what follows is hexadecimal code and not a named color (like black, white, red, etc.). While Dreamweaver will accept a value without the number sign, it is best to include it. When you use the color box to select a swatch, you'll notice that the number sign is included.

Click OK to close the Page Properties dialog box and return to your document. Save the intro.html file.

The default link colors for your page are now the colors you specified. You will see the colors after you begin to create links. Keep this document, intro.html, open. It contains all the text and graphics you will need to create links in the following exercises.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint