ONLINEPDFPROOFING.COM

proofing tools vista - www.onlinepdfproofing.com

Menu


It's important that you highlight and apply the style class to each link individually. If you highlight the cells as a group and apply


the style once, the class is applied to the <td> tag instead of each individual <a> (link) tag. Applying the style to the individual links guarantees that pseudo-classes such as hover, discussed later in this chapter, will work properly. To ensure that the class is being applied properly, select the link in the navigation bar and look at the Tag Selector. If the last tag in the list reads <a.link>, the class was applied properly. To guarantee that the class is applied correctly, you can also apply a class directly to a tag using the Tag Selector. For instance, I'll highlight the Admin link, right-click the <a> tag in the Tag Selector, and choose the link option from the Set Class submenu as shown in Figure 7.22. Figure 7.22. Apply the class directly from the Tag Selector. [View full size image]   You can remove a style class by choosing the None option from the Set Class submenu that appears when you right-click the tag in the Tag Selector. Alternatively, you can choose the None option from the Style menu in the Properties Inspector. Now that you have an idea as to how classes and style sheets are created, and you know how to apply classes to elements in your web pages, let's divert our attention to working with tag redefinitions. In the next section, we'll redefine the default properties for the <body> tag to set the margins and the default text face and size for the page. Designing Styles by Redefining HTML Tags Aside from creating classes within your style sheets, you can also redefine HTML tags. Redefining an HTML tag is the process of changing the properties of a tag (as they're defined by the browser) using CSS. For example, the <body> tag, in which all elements in a typical web page are nested, is defined by the browser as having left and top margins of 5 pixels and the font as having the Times New Roman type face with a size of 3 and a color of black. By redefining this tag using CSS, we can change these properties to anything we want. And because we're redefining a tag, there are no classes or IDs to define and no elements to define them to. Even better, every time we create a new page in our site, that new page will inherit the properties set for the <body> tag (as long as the link between the page and external style sheet file exists). As an example, let's redefine the <body> tag: 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 in the bottom right of the CSS Styles panel). The New CSS Rule dialog appears. 2. Choose the Tag radio button from the Selector Type group. The Name menu becomes a Tag menu. 3. Select the Body option from the Tag menu. 4. Make sure that styles.css is selected from the Define In menu (see Figure 7.23). Figure 7.23. Choose the Tag Selector Type and then choose the Body option from the Tag menu. 5. Click OK. The CSS Rule Definition for Body in styles.css dialog appears. 6. In the Type category, choose the Arial, Helvetica, Sans-serif option from the Font menu and enter the value 12 pixels in the Size text box. 7. Switch to the Box category and enter 0 in the Top text box for Margin, making sure that the Same for All check box is selected. 8. You're done. Click OK to close the CSS Rule Definition dialog and return to your workspace. Notice that the margins of the page instantly disappear, and that all the text on the page changes from Times New Roman to Arial in a size of 12 pixels. It's important to note that tag redefinitions aren't applied like classes are, meaning that there isn't anything to select from the Style menu in the