- Creating and Applying a Custom Style
- Exploring Style Settings
- Redefining the Heading 3 <h3> Tag
- Positioning a Layer with a Style
- Creating a Hyperlink Rollover
- Creating an External Style Sheet
- Transforming the Property Inspector
- Converting Styles to HTML Markup (<font> Tags)
- Saving HTML Markup as an HTML Style
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Hyperlink Rollover
The third type of style is a CSS Selector. This type of style redefines a group of HTML tags instead of just one. For instance, you could define what a specific heading tag looks like only within a table cell by entering the table cell tag, <td>, and then the paragraph tag, <p>. To do this, you enter all of the tag names in the Selector box, as shown in Figure 15.9, and then define the style.
){kind=link}
Figure 15.9 You can define attributes for multiple HTML tags with CSS Selector styles in the New Style dialog box.
Creating hyperlink rollovers is a common and fun use of CSS Selector styles. These CSS Selector styles redefine the anchor (<a>) tag, the tag that is used in hyperlinks. Define an anchor style that makes the link color change when the user has his cursor positioned over a hyperlink. To create a hyperlink rollover
Create a new style and select the radio button beside Use CSS Selector.
-
The Selector drop-down menu displays the four link styles, shown in Figure 15.10. Select the a:hover selector to add a rollover to all of the hyperlinks in your Web page. Click OK.
The Style definition dialog box appears. In the Type category, select a color and then press OK.
){kind=link}
Figure 15.10 The four link styles appear in the drop-down menu when you select the Use CSS Selector radio button.
To see the selector, create a hyperlink in your Web page. Save the page and preview it in Internet Explorer. When your cursor is over the hyperlink, it changes color! This effect works only in Internet Explorer and Netscape 6 and above; in Netscape 4, the hyperlink appears as usual, without the rollover effect.