adobe dreamweaver cs5 on demand part 36 pdf

ptg 220 Chapter 9 The CSS Styles panel lists all the internal and external styles attached to the active Web page. Dreamweaver allows you to edit the internal and external styles with the CSS Styles panel and the Properties panel. If you only want to work with the CSS style for the currently selected text, you can use the Properties panel. From the Properties panel, you can display or change the selected target rule, edit the rule definition, access the CSS Styles panel, and change text style formatting. When you change CSS rules, the rule properties are updated in the head of the document or to an external style sheet. You can quickly toggle back and forth between CSS rule properties and HTML formatting properties on the Properties panel. Editing CSS in the Properties Panel Edit CSS in the Properties Panel Open the Web page that contains the stylized text you want to view. Click the insertion point inside the block of text with the CSS rule that you want to edit. Click the CSS button in the Properties panel. The following options are available on the Properties panel: ◆ Targeted Rule. Displays the selected rule. You can use the list arrow to create new CSS rules, in-line styles, or apply existing classes to selected text. ◆ Edit Rule. Opens the CSS Rule Definition dialog box for the selected rule. See “Setting CSS Properties,” on page 222 for information on available options in the CSS Rule Definition dialog box. ◆ CSS Panel. Opens the CSS Styles panel and displays properties for the selected rule. ◆ Font. Sets the font family to the selected rule. ◆ Size. Sets the font size to the selected rule. 4 3 2 1 2 3 4 From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 221 ◆ Text Color. Sets the font color to the selected rule. ◆ Bold. Adds bold to the selected rule. ◆ Italic. Adds italic to the selected rule. ◆ Left, Center, and Right Align. Adds alignment to the selected rule. Set HTML Formatting in the Properties Panel Open the Web page that contains the stylized text you want to view. Select the text you want to format. Click the HTML button in the Properties panel. The following options are available on the Properties panel: ◆ Format. Sets the paragraph style. ◆ ID. Assigns an ID to the selection. ◆ Class. Displays the class style. ◆ Bold. Applies <b> or <strong>. ◆ Italic. Applies <i> or <em>. ◆ Unordered or Ordered List. Creates a bulleted or numbered list. ◆ Indent and Outdent. Adds or removes an indention. ◆ Link. Creates a hyperlink. ◆ Target. Specifies the frame or window in which the linked document loads. 4 3 2 1 4 4 3 From the Library of Wow! eBook ptg After you create a new CSS rule, you can alter properties for it. The CSS Rule Definition dialog box lets you select the CSS properties you want to define a CSS rule. You can set CSS properties for any of the fol- lowing categories: Type, Background (image and color), Block (spacing and alignment), Box (placement), Border (width, color, and style), Lists (bullets or numbers), Positioning (on page), and Extensions (filters, page breaks, and pointers). 222 Chapter 9 Setting CSS Properties Set CSS Properties Open the Web page that contains CSS styles (internal or external) you want apply properties. Open the CSS Styles panel. Double-click the rule or property you want to define. TIMESAVER Select the rule or property, and then make changes to the available attributes in the lower panel in the CSS Styles panel. Use the Show buttons at the bottom of the CSS Styles panel to display different attributes. Specify the options you want in the CSS Rule Definition dialog box: ◆ Typ e an d Fo nt . Click the Typ e category, and then specify the following options: Font, Size, Style, Line Height, Decoration (underline, overline, line- through, or blink), Weight (boldface), Variant (small caps), Case (first letter, uppercase or lowercase), or Color. ◆ Background Image and Color. Click the Background category, and then specify the following options: Background Color, Background Image, Repeat, Attachment, or Horizontal Position and Vertical Position. 4 3 2 1 2 3 External style sheet Properties for selected style Internal style sheet From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 223 ◆ Spacing and Alignment. Click the Block category, and then specify the following options: Word Spacing, Letter Spacing, Vertical Alignment, Text Align, Text Indent, Whitespace ( Normal collapses white space, Pre works like the pre tag, or Nowrap only with br tag), or Display. ◆ Placement. Click the Box category, and then specify the following options: Width and Height, Float, Clear, Padding, Same For All (padding), Margin, or Same For All (margins). ◆ Border Width, Color, and Style. Click the Border category, and then specify the following options: Style, Same For All (style), Width, Same For All (width), Color, or Same For All (color). ◆ Bulleted and Numbered Lists. Click the List category, and then specify the following options: Type, Bullet Image, or Position. ◆ Page Positioning. Click the Positioning category, and then specify the following options: Type ( Absolute , Relative , Fixed , or Static ), Visibility ( Inherit , Visible , or Hidden ), Z-Index, Overflow, Placement, or Clip. ◆ Filters, Page Breaks, and Pointers. Click the Extensions category, and then specify the following options: Pagebreak, Cursor, or Filter. Click OK. 5 5 4 Click the Current button to display the style for the selected text. From the Library of Wow! eBook ptg 224 Chapter 9 A CSS rule consists of two parts: selector and declaration. The selector identifies the formatted elements (such as p, body, or h1), while the declaration defines the style properties. The declaration is a collection, known as a block, of properties and values. For example, font-family: Arial; defines the text style as the Arial font. The declaration is every- thing between the braces ( {} ). After you create a CSS rule, you can use the CSS Styles panel to modify and customize it to better suit your needs. If you no longer need a CSS rule, you can remove it. Working with CSS Rules Modify an Existing Rule Open the Web page that contains CSS styles with the rule you want to apply a property. Open the CSS Styles panel. Select a rule from the available options in the All Rules pane (All mode) or select a property in the Summary for Selection pane (Current mode). Use any of the following methods: ◆ Double-click a rule or property to open the CSS Rule Definition dialog box. Make changes to the rule, and then click OK to save the changes. ◆ Click the Show Only Set Properties button, click the Add Properties link, and then fill in a value for the property in the Properties panel. ◆ Click the Show Category View or Show List View button, and then fill in a value for the property in the Properties panel. 4 3 2 1 4 2 Show category view 3 4 Show list view 4 Show only set properties From the Library of Wow! eBook ptg Chapter 9 Working with Cascading Style Sheets 225 Delete an Existing Rule Open the Web page that contains CSS styles with the rule you want to delete. Open the CSS Styles panel. Select a rule from the available options. Click the Delete button in the CSS Styles panel. NOTE The rule will be deleted and all text the rule was attached to will revert back to their default format. 4 3 2 1 4 2 3 Did You Know? You can edit a CSS style sheet. Instead of editing individual rules, you can edit the entire style sheet. Click the Window menu, click CSS Styles to open the CSS Styles panel, click the All button, double-click the name of the style sheet you want to edit, modify the style sheet in the Document window, and then save your changes. You can change the name of a CSS selector. Open the CSS Styles panel, click the All button, click the selector you want to change, click it again to make the name editable, change the name, and then click Enter (Win) or Return (Mac). From the Library of Wow! eBook . Opens the CSS Rule Definition dialog box for the selected rule. See “Setting CSS Properties,” on page 222 for information on available options in the CSS Rule Definition dialog box. ◆ CSS Panel then specify the following options: Type, Bullet Image, or Position. ◆ Page Positioning. Click the Positioning category, and then specify the following options: Type ( Absolute , Relative ,. consists of two parts: selector and declaration. The selector identifies the formatted elements (such as p, body, or h1), while the declaration defines the style properties. The declaration