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

Styling Navigation Links

In this section you’ll be using a different form of CSS Selector to define three link styles for the page: the default links, the main navigation links, and the links for the secondary navigation on the left side of the page.

Add a new CSS style and set the Selector Type to Advanced. Click the drop-down arrow, and choose a:link. Be sure that you are still working in the pbr_style.css file.

Place your cursor in front of the a in the Selector field, and type in #mainNav. The selector will now read #mainNav a:link. Be sure that there is a space between the letters “v” and “a.”

Click OK, and in the Style Definition dialog, set the Text Size to 10 pixels and the color to white (#FFFFFF). In the Decoration settings, check None and then click OK to close the first definition.

Unlike the previous text elements, the design calls for the navigation bar text to remain at the same size, and therefore a fixed pixel size has been chosen.

Add another new style using the CSS selector of a:visited. Type #mainNav in front of the selector. Use the same 10 pixel size, set the color to #CC99CC, and set Decoration to None. Remember that there needs to be a space between the class and the selector.

Create links for the a:hover and a:active selectors, type #mainNav ahead of them. Use a color of #FF9966 for hover and white (#FFFFFF) for active. Be sure that Decoration is None for both. This finishes the main navigation styling.


There’s a well-known mnemonic device to help you remember that link styles must always be applied in a specific order. Link-Visited-Hover-Active; or LoVeHAte. If you can remember Love-Hate, your links will always be styled in the proper order.

If your text seems a little too insubstantial, you can always edit the style and change the Weight value in the Type category to Bold. You only need to edit the four styles to have the change take effect with all your links—the power of CSS!

Create two additional link styles to set your design into motion, one for the left navigation (#mainLeft a:[pseudo-class]) and one for the main links in the page (#mainCenter a:[pseudo-class]). Refer back to the original design concept in Fireworks to see how the sizes and colors of the links might be applied.

Save your work.



Not a subscriber?

Start A Free Trial

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