ONLINEPDFPROOFING.COM

seal drown proofing test - www.onlinepdfproofing.com

Menu


Properties Inspector. Instead, tag redefinitions are attached to the tag in a sense and are therefore added by simply choosing the specific


formatting option from either the Properties Inspector or the context and Modify menus. In our case, our page (as all pages do) already contains a <body> tag, so the properties of the tag redefinitions are instantly applied. Working with Pseudo-Classes Other rules, such as pseudo-classes, exist for creating CSS styles within Dreamweaver's framework and are represented by the final radio button in the Selector Type radio group in the New CSS Rule dialog. You can use pseudo-classes to define styles for certain tag states. The difference between normal classes and pseudo-classes is that pseudo-classes must be associated with an already defined class and are "attached" to the existing class by a colon. For instance, we've already defined a class named .link. We can use the hover pseudo-class to assign styling to all elements that use our .link class as follows:   .link:hover   This code allows us to define a new color for elements that use the .link class when the cursor rolls over them. It's important to note that pseudo-classes already have predefined names as opposed to classes, which you name yourself. The most common pseudo-classes are those that specify styling for hyperlinks. These include: a:link controls the styling given to all unvisited links. a:visited controls the styling given to all links that have already been clicked. a:hover controls the styling given to all links when the cursor rolls over them. a:active controls the styling given to all currently selected links. For the most part, pseudo-classes (as they are supported in Dreamweaver) are associated with the <a> tag (although this is not always the case when working with pseudo-classes by hand). For this reason, pseudo-classes are listed with the <a> tag, followed by a colon, and then the pseudo-class type. However, as you saw in the preceding example, pseudo-classes can also be associated with existing classes. In our project, we'll want to associate the hover pseudo-class to the .link class. To do this in Dreamweaver, follow these steps: 1. Create a new style in your external styles.css file by clicking the New CSS Rule icon (located second from the left in the icon group on the bottom right of the CSS Styles panel). The New CSS Rule dialog appears. 2. Enable the Advanced radio button in the Selector Type group. The Tag menu becomes a Selector menu. 3. From the Selector menu, choose the a:hover pseudo-class. 4. Replace the a with .link. Your dialog will resemble Figure 7.24. Figure 7.24. Use the hover pseudo-class to redefine the rollover state of our navigation bar. 5. Click OK. The CSS Rule Definition dialog for .link:hover in styles.css appears. 6. This time, change only the Color. I'll use the eyedropper tool that appears to sample the green color from the background image in the Header table. 7. Click OK. The new pseudo-class appears in the CSS Styles panel. Again, like tag redefinitions, you don't select and apply pseudo-classes as you would a normal class. Instead, pseudo-classes are associated with existing classes or tag redefinitions. In our case, our pseudo-class is associated with the existing .link class. What this means is that all links will take on the properties defined under the .link class; as soon as the user's cursor rolls over the links, they will take on any properties that override those defined in the normal classin this case, the color defined by the pseudo-class hover. Save your work and preview the page in the browser. As Figure 7.25 shows, the link color changes when the cursor rolls over it.