ptg 226 Chapter 9 After you create a set of CSS rules that you like, you can move them from one document to another, from the head of a document to an external style sheet, and between different external CSS files. If a con- flict arises when you move a CSS rule from one place to another, you can specify how you want Dreamweaver to handle it. Moving CSS Rules Move CSS Rules to a New Style Sheet Open the document with the CSS rules you want to move. Open the CSS Styles panel or display Code view. Select the rule or rules you want to move. ◆ To se lect multiple rules, Ctrl- click (Win) or A-click (Mac) the rules you want to select. Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules. Select the A New Style Sheet option. Click OK. Enter a name for the new style sheet. Click Save. 8 7 6 5 4 3 2 1 2 3 5 6 4 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 227 Move CSS Rules to an Existing Style Sheet Open the document with the CSS rules you want to move. Open the CSS Styles panel or display Code view. Select the rule or rules you want to move. ◆ To se lect multiple rules, Ctrl- click (Win) or A-click (Mac) the rules you want to select. Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules. TIMESAVER Drag a rule in the CSS panel to a new position. For example, you can drag a rule from the internal document to the external document. Click the Style Sheet option, and then select an existing style sheet already linked to the document from the menu or click Browse to select an existing style sheet. Click OK. 6 5 4 3 2 1 2 3 5 6 Did You Know? You can rearrange or move CSS rules by dragging. Open the Styles panel, click the All button, select the rules you want to move, and then drag them to the new location. You can move a rule to another style sheet or the docu- ment head or rearrange rules within a style sheet. 4 From the Library of Wow! eBook ptg 228 Chapter 9 2 3 Instead of deleting a CSS rule that you might want to use in the future, you can disable one or more rule properties (New!). When you need it again, you can enable it. When you disable a CSS rule property, Dreamweaver wraps the CSS code as a comment. In the CSS Styles panel, you can use the Disable/Enable CSS Property button to disable or enable individual properties. When you disable a property, the red universal no sign (circle with a line thru it) appears next to it in the CSS Styles panel and Code Navigator. If you assign a new value to a dis- abled property, Dreamweaver automatically enables it. Disabling or Enabling CSS Rules Disable or Enable CSS Rule Property Open the document with the CSS properties you want to disable/enable. Open the CSS Styles panel. Select the rule with the property you want to disable/enable. Select the CSS property you want to disable/enable. Click the Disable/Enable CSS Property button. TIMESAVER Point to the left of the property name in the CSS Styles panel, and then click a blank area to disable a property or click a Disable icon to enable a property. 5 4 3 2 1 5 Did You Know? You can enable all disabled properties in a selected rule. In the CSS Styles panel, select the rule, click the Options menu, and then click Enable All Disabled In Selected Ruler (New!). You can delete all disabled in a selected rule. In the CSS Styles panel, select the rule, click the Options menu, and then click Delete All Disabled In Selected Ruler (New!). 4 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 229 CSS Inspect works together with Live View to quickly identify HTML elements and their associated CSS styles to give you immediate feed- back (New!). In Live View, you can click the Inspect button on the Document toolbar to enable the feature. With CSS Inspect enabled, you can move the mouse over elements on your page to see the CSS box model attributes for any block level element. When an element is high- lighted in Live View, the corresponding HTML code is selected in Code or Split view. You can also view the CSS styles and properties for the selected element in the CSS Styles panel. CSS Inspect works best with the CSS Styles panel open in Current mode, and the Document window in Split Code/Live View and Live Code. If the workspace is not in this set up, the Info bar appears, asking you to switch to it. Inspecting CSS Code Inspect CSS Styles Open the Web page you want to view. Switch to Design, Split, or Code view. Click the Live View button. Click the Inspect button. If the Info bar opens asking you to switch to the best workspace, click the Switch now link. The CSS Styles panel opens in Current mode, and the view changes to Split Code and Live Code view. Point to HTML elements on the page to display CSS styles in the CSS Styles panel. Click the Refresh button in the Document toolbar or press F5 to view any changes. If you want, make CSS changes, select the element, and then make the changes you want in the CSS Styles panel. To re turn back to Design view, click the Live View button again. 9 8 7 6 5 4 3 2 1 5 Info bar 3 4 2 9 7 Info bar 6 8 From the Library of Wow! eBook ptg 230 Chapter 9 Understanding Inheritance With CSS, certain properties can be inherited from parent elements, making it easy to style one element and have all the descendent ele- ments display the same style. This reduces the size of your CSS code and makes it easier to read, debug, and maintain. When you apply a style to an element, any property that can be inherited is passed to any child, or nested, elements. For example, if you apply the font properties of Times New Roman and 14px to the <p> tag, any nested <em> element would also be Times New Roman at 14 px. If styles conflict, the style closes to the element is applied. You can use the Relevant CSS tab to help you determine which style is in control and make any adjustments that you want. Using the Relevant CSS Tab The Relevant CSS tab lets you track the CSS rules affecting the currently selected text ele- ment as well as modifying the rule's proper- ties. The Relevant tab is located in the Tag Inspector. Click the Window menu, and then click Tag Inspector. The Relevant CSS tab con- sists of two sections: ◆ The upper portion of the Relevant CSS tab shows the rules affecting the current selection and the tags that they affect. ◆ The lower portion of the Relevant CSS tab displays the properties of the currently selected element in an editable grid. The properties are arranged alphabetically, with the set properties sorted to the top of the tab. Set properties are displayed in blue; properties irrelevant to the selection are dis- played with a red strike through line. Hovering over a rule that is irrelevant displays a message explaining why the property is irrelevant. Typically, a property is irrelevant because it is overridden or not an inherited property. You can also use the lower panel of the Relevant CSS tab to modify the properties of a selection. The editable grid lets you change the values for any of the displayed properties. Any changes you make to a selection are applied immediately, letting you preview your work as you go. Using the Relevant CSS Tab From the Library of Wow! eBook . Relevant CSS tab con- sists of two sections: ◆ The upper portion of the Relevant CSS tab shows the rules affecting the current selection and the tags that they affect. ◆ The lower portion of the. want to select. Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules. Select the A New Style Sheet option. Click OK. Enter a name for the. select. Right-click (Win) or Control-click (Mac) the selection, point to CSS Styles, and then click Move CSS Rules. TIMESAVER Drag a rule in the CSS panel to a new position. For example, you can