ONLINEPDFPROOFING.COM

proofing house press - www.onlinepdfproofing.com

Menu


The Extensions category of the CSS Rule Definition dialog, shown in Figure 7.19, provides you with advanced CSS functionality. Modifying


extensions allows you to make changes to the way page breaks are handled, to customize cursors, and to create opacities, glows, and more. Figure 7.19. Use the Extensions category to work with advanced CSS features such as customized cursors.   Here is a list of properties exposed by the Extensions category: Page break: Choose options from these menus to force a page break during printing either before or after the element controlled by the style. This property is only supported by Internet Explorer browser versions 5.5 and above. Visual effect: Cursor: Choose an option from this menu to change the pointer image when the pointer is over the element controlled by the style. There are 14 different cursor options to choose from. Visual effect: Filter: Select an option from this menu to apply special effects to the element controlled by the style. Most of the options in this list are supported only by Internet Explorer 4 and above. Apply Style Classes to Elements on Your Page Now that you have a good idea as to the various properties that can be accessed and modified using the CSS Rule Definition dialog, it's time to apply what we've selected. To review, we modified basic type properties and added a slight 5-pixel padding to the left side of the element. To apply the style class we've created, we must first click OK to close the CSS Rule Definition dialog and return back to our workspace. After you click OK, the new class appears in the CSS Styles panel, as shown in Figure 7.20. Figure 7.20. The new style class appears in the CSS Styles panel.   Looking at the CSS Styles panel, notice a few interesting points. First, the style is defined as a class. You can see this in the CSS Styles panel by the period (.) in front of the name; this period defines this style as a class. Second, you can see the properties of the class listed below the All Rules list, in the Properties for ".link" list. Finally, you can see that the style class is actually a part of an external style sheet defined by styles.css. Hierarchically, the class appears under, or within, the external style sheet file. If we were using a document-wide style sheet, the class would appear under the heading <style>. NOTE The CSS Styles panel allows you to work with external style sheets and document-wide styles on the same page. An external style sheet is defined by styles.css in the CSS Styles panel, and a document-wide style is defined with the <style> tag. All classes, tag redefinitions, and so on are hierarchically listed under their respective style sheet.   Because we've created a class named .link, this should tip you off to the fact that we've just created a style to handle the left-side navigational links on the index.htm page. To apply the new style to the link, highlight the individual link (the text Home) and choose the link option from the Style menu in the Properties Inspector, shown in Figure 7.21. Figure 7.21. Select the link option from the Style menu to apply the style to an element on the page. [View full size image]   After you select the style from the list, notice that the link for Home changes based on the properties we defined in the CSS Rule Definition dialog. Now select each of the other links and apply the same link style class.