Building Link Styles | Macromedia Studio MX Bible

< Day Day Up >

When you want to develop styles that control the appearance of your page links, you have several options. With HTML formatting, you can set the link, visited link, and active link values, adding the properties to the <body> tag in the page. With CSS, you get a fourth option (not in Netscape 4x) to set a value for hover — in effect, a mouse-over style.

You can set a single value to be used for all these properties by redefining the anchor <a> tag. To set one value for all, simply redefine the HTML tag <a> and choose your properties.

You can define separate values for one or more of the pseudo-selectors associated with the anchor <a> tag. Pseudo-selectors are equivalent to sub-sets of the tag. To use pseudo-selectors, you must select the Use CSS Selectors option in the New CSS Styles dialog box. Additionally, these styles must be set in a specific order:

a:link

a:visited

a:hover

a:active

Netscape 4x browsers do not support the hover property and ignore it. Although not supported by NN4x when set using HTML formatting, the Active state is broken when set via CSS. As usual, NN4x support for CSS is typically quirky.

Applying link styles

Links occur in your pages whenever the anchor tag is wrapped around text or images. When you opt to use link styles, you do not need to apply them; they are automatically applied when the page renders.

The Tao of Link

The familiar blue, underlined text we all know means something. In less than a decade, even the Web surfer realizes that blue, underlined text is clickable. Be careful when you choose to alter the default properties for your links; your visitor might not know to click it!

Setting Link Properties

HTML formatting of link properties allows only color selection. This is generally all you will use when creating your link styles via CSS, too. You may opt to set other options, but you do not know where links might appear. When setting colors, be aware that the color may need to be used over many different background colors or images. Using other properties, such as font weights (as in bolding) or font sizes (as in changing size), can cause a reflow of text that can be annoying to visitors to occur.

Text decoration

Text links are underlined because their Decoration is, by default, underlined. To remove the underline, set the Decoration property to None, or use one of several options available in the Type category of the Style Definition dialog box.

On the CD-ROM

Save the Habitat Alert36 folder from the chapter36_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

Habitat Alert site Follow these steps to add basic link styles to the project site style sheet:

Add a new style in the external style sheet ( main.css). Select Use CSS Selector and select a:link from the Use CSS Selectors menu. Click OK.
In the Style Definition dialog box, set the color value for all links to #666600, a dark olive green. Click OK.
For the project site, the link and visited link colors will be the same. Rather than build a new visited style, take advantage of the Duplicate feature in Dreamweaver to save time. In Edit mode, select the new a:link style and choose Duplicate from the panel Options menu.
When the Duplicate dialog box opens, be sure that your duplicated style is defined in the external main.css style sheet and select a:visited from the Use CSS Selectors menu. Click OK.
To define a hover style, select and duplicate the visited style, using the same process described in Step 4, but choose a:hover from the menu.
When you've closed the dialog box, double-click the hover style in Edit mode to open for editing. Because hover is a mouse-over effect, you want the property values to change. Choose #006699, a medium bright blue. Click OK.
Repeat the duplication process or add a new style to the external style sheet, selecting a:active from the menu and setting its color value to #999933, a light olive-gold green. Click OK. Save and test the page in your target browsers. Mouse over the text links at the bottom of the page. Keep the page open for additional CSS style exercises.

< Day Day Up >