After you create a style sheet and add rules to it, you can apply the styles to any Web page or selected text block using several different methods. See the

online proofing for photographers

example, you could create a style for images that controls alignment and other attributes. Figure 8-5: The CSS Styles panel showing the new .headline class you just created. Chapter 8: Cascading Style Sheets 209 Applying styles in Dreamweaver Defining custom styles in Dreamweaver is the time-consuming part. Applying them after you defined them is the timesaving part. Applying them is easy: You simply select the text, or other element, you want to affect and choose the predefined style you want to apply to it. To apply a style in Dreamweaver, follow these steps: 1. Highlight the text, or other element, in an open document to which you want to apply a style. 2. In the Properties inspector, click the Style pop-up menu to reveal the list of styles associated with the document and select the one you want. Notice that Dreamweaver allows you to preview the style when you select it with this method, as shown in Figure 8-6. After you choose a style, the selected text changes in the Document window (see Figure 8-7). Figure 8-6: Selecting a style with the Properties inspector. 210 Part III: Advancing Your Site Another way to apply a style to a highlighted text selection is by choosing the name of the style from the menu you see when you choose Text?CSS Styles or right-click (Control+click on the Mac) the selected text and then choose the style from the resulting pop-up menu. The method you choose depends on your own personal preferences. I like to use the Properties inspector because its the only method that allows you to preview the way the style appears before applying it. When you apply a style at the code level, Dreamweaver generally adds a class attribute to the tag surrounding the text to which you apply the style. This class attribute is tied to the style you defined and causes the selected text to take on the properties of the style. For example, if you have a section of text that looks like this in Code view before attaching a style: <P>This is my headline</p> Dreamweaver adds a class attribute to the <P> tag, which associates it to the .headline class. The resulting code looks like this: <P class=”headline”>This is my headline</P> Figure 8-7: After applying the .headline style to the page. Chapter 8: Cascading Style Sheets 211

Read also about: eproof web site builder