Adding and Formatting Text - New Perspectives on Adobe Dreamweaver CS5, Comprehensive - page 147

To move the styles from the home page to an external style sheet:

◗

1. In the Files panel, select index.html , if necessary.
◗

2. In the CSS Styles panel, click the All button, if necessary.
◗

3. In the All Rules pane, click the first style in the list, press and hold the Shift key,
click the last style in the list, and then release the Shift key. All of the styles are
selected.

Be sure to move all the
styles to the external style
sheet to avoid conflicts
that cause the page to
display incorrectly.

◗

4. Right-click the selected styles, and then click Move CSS Rules on the context
menu. The Move To External Style Sheet dialog box opens.

◗

5. Click the A new style sheet option button, and then click the OK button. The
Save Style Sheet File As dialog box opens.
You need to create a new folder in which to store the external style sheet.

◗

6. Verify that the Save in box displays the local root folder of your NextBest Fest site
(the local site folder).

◗

7. On the dialog box toolbar, click the Create New Folder button . A new folder
is created within the local root folder of your NextBest Fest site and appears in the
Save in list with the New Folder name selected.

◗

8. Type stylesheets , and then press the Enter key. The new folder is renamed
stylesheets. Double click to open. You'll save the external style sheet in this folder.

◗

9. In the File name box, type nbf_styles . The external style sheet has a descriptive
name. See Figure 3-21.

Figure 3-21 Save Style Sheet File As dialog box

navigate to the
stylesheets folder

type a descriptive
name for the
style sheet

style sheet files
have the .css
extension

◗

10. Click the Save button. The external style sheet file is saved within the folder
you created, the styles disappear from the code for the home page, and the
nbf_styles.css page appears in the Related Files toolbar located below the index.
html tab at the top of the Document window. When you open a page in the
Document window, the related documents associated with the open file such as
style sheets or external JavaScript files appear in the Dynamic Related Files tool-
bar so you can easily move between them and update the pages.