
apply the style definitions. To create an external style sheet, follow these steps: 1. Choose Text?CSS Styles?New. The New CSS Rule dialog box appears. 2. Select from the Selector Type category the type of style you want to create. Remember that you have three options: Class, Tag, or Advanced. Chapter 8: Cascading Style Sheets 229 3. Fill out the Name field, or select an option from the Tag or Selector fields, depending on which selector type you chose in Step 2. 4. In the Define In area, select (New Style Sheet File). 5. Click OK. The Save Style Sheet File As dialog box opens. 6. Select a location in which to save the style sheet file and click Save. Name the file and be sure to use a .css extension to identify your file as a style sheet. Dreamweaver automatically adds the .css; just make sure you dont delete it. 7. Click Save. The CSS Rule Definition dialog box opens. 8. Define the new style rule specifying all formatting options you want applied with the new style. 9. Click OK to save the new style and close the dialog box. Your new style is saved to your external style sheet and made available to link to any of the files in your Web site. Linking to an external style sheet After you set up an external style sheet, you may want to link it to additional Web pages. Begin by opening the page to which you want to attach the style sheet, and follow these steps: 1. Choose Window?CSS Styles. The CSS panel appears. 2. Click the Attach Style Sheet icon in the CSS panel (the first button in the lower-right area). The Attach External Style Sheet dialog box appears (shown in Figure 8-20), prompting you to select the location of the external style sheet. You can type the URL if its a remote file on the Web like this line: http://www.mycompany.com/CSS/mystyle.css or use the Browse button to locate a file inside your site folder and Dreamweaver automatically sets the link for you. Notice that two options are available for linking to an external style sheet: Link and Import. Attaching a style sheet by linking it is the pure HTML way to handle attachment; importing is intended to allow one style sheet to call another. 230 Part III: Advancing Your Site The Media drop-down list allows you to select a scenario for which to use the style sheet. For example, if youve created a style sheet that formats your page correctly for PDA display, select the Handheld option on this menu. 3. After you select the external style sheet, click the OK button. The dialog box disappears, and the external CSS file automatically links to your page. Any styles you have defined in the external style sheet now appear in the CSS panel, and any redefined HTML styles or CSS selectors are automatically applied to the page. Because you have established a link on this page to the external style sheet, the styles in the external style sheet always appear in the CSS panel whenever you open this file (see Figure 8-21). Figure 8-21: