ONLINEPDFPROOFING.COM

installing proofing tools - www.onlinepdfproofing.com

Menu


2. With the CSS Styles panel open, click 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 as shown in Figure 7.11. Figure 7.11. The New CSS Rule dialog allows you to create new styles and style sheets.   NOTE Alternatively, you can open the New CSS Rule dialog by right-clicking in the CSS Styles panel to access the context menu and choosing New. Furthermore, you can access the New option from the CSS Styles submenu in both the context and Modify menus. Finally, you can choose the New option from the panel's Option menu located on the right end of the blue title bar for the panel group. 3. The New CSS Rule dialog exposes the following functionality: Selector Type: Allows you to pick the type of style to create in either a new external style sheet file or a document-wide style sheet. Options include Class, Tag Redefinition, and Advanced. Choosing the Tag option causes the Name menu (mentioned below) to change to a Tag menu, from which you can pick modifiable HTML tags. Choosing the Advanced option causes the Name menu to change to a Selector menu, from which you can pick one of four contextual selectors including link, visited, hover, and active. For our examples, make sure that the Class option is selected. Name: Depending on the option you select from the Selector Type radio button group, this menu changes to read Name, Tag, or Selector. With Class selected in the Selector Type radio button group, enter the class name .link here. Remember that the period (.) reserves this style as a class. Define in: The first option in this menu, New Style Sheet File, opens the Save Style Sheet File As dialog, effectively allowing you to create a new external style sheet file based on the name you specify. The second option, This Document Only, creates a new document-wide style sheet within the <head> tag of the existing page. For our example, make sure that the New Style Sheet File option is selected. 4. Click OK. When the Save Style Sheet File As dialog appears, navigate to the root of your project (it should already be within the root if you defined your site correctly), and enter the name styles in the File Name text box. 5. Click Save. The CSS Rule Definition dialog appears, similar to Figure 7.12. Figure 7.12. The CSS Rule Definition dialog allows you to define properties for your new class. Now that you have a new style sheet file created (styles.css) and you've effectively created a class (.link) within that style sheet file, it's time to start assigning properties for the class. The CSS Rule Definition dialog allows us to set properties for the following categories: Type Background Block Box Border List Positioning Extensions NOTE It's important to understand that the CSS Rule Definition dialog is only one method for modifying properties within a style rule. As you saw earlier in the chapter, the CSS Styles panel exposes a category and list view as well as an Add Property link in the Properties list that allows you to quickly define properties for a rule directly from the CSS Styles panel without having to open the CSS Rule Definition dialog.