Contextual Link Styles

---

Use the same concept to add more than one set of link styles to your pages, something not possible using HTML formatting. Remember, the formula for a contextual style is .class plus a space plus the selector. For link styles, the selectors are pseudo-selectors, so your contextual link style would read .class a:link or .class a:visited, and so forth.

To define an additional, contextual set of link styles in a document, follow these steps:

1. Define a new site using the linkstyles folder inside of the chapter36_exercise folder as the root.

2. Open the page more_link_styles.htm from the linkstyles folder.

   This page has a set of default link styles that work well on the lighter-colored areas. If you click the different cells of the layout, you should notice that each cell is of a specific class; they all have a context. The default link colors don't work well in the footer cell because the color of the cell background and the color of the link are similar. Also, the main navigation links would be better if they were not underlined. In this exercise, you build two more sets of link styles specifically for each of these areas.

3. Add a new style to the external style sheet  linkstyles.css. Choose Use CSS Selectors and type .footer a:link.

4. Set the font color to #FFFFFF (White). Click OK.

5. Select and duplicate the new style, adding .footer a:visited to the Selector field. You won't change any values, so click OK to close the Definition dialog box.

6. Select and duplicate the style again, naming this one .footer a:hover. Click OK. Then double-click the style in Edit mode of the CSS Styles panel to edit it. Change its font color to #000000 (Black).

7. Null footer links are set in the document. Save and preview in an IE browser to see the hover effects when you move your cursor over the links in the footer region.

8. Add another new style, again using the Use CSS Selectors option. Type .navigation a:link and click OK.

9. Set the color to #FFFFFF (White) and the text-decoration to None, Click OK.

10. Duplicate this style, typing .navigation a:visited in the Selectors field.

11. Duplicate again, typing .navigation a:hover in the Selectors field. Click OK. Now double-click the listed style in Edit mode to open it and change the text color to #000033 (Dark Blue). Click OK.

12. Save the page and test it in a browser.

The page now uses three sets of link styles, making it much easier to read links on the different backgrounds. Using contextual link styles also enables you to explore different decoration options without committing all your links to them.

---