Working with External style sheets
The CSS styles you've created so far have only applied to this document. Internal style sheets apply only to the document in which they are created. Now, you'll learn how to create an external style sheet which contains the styles you define in this document and then how to attach it to another html file.
Export styles to create an external style sheet
1. Switch to Code View and browse to the head of the document where the CSS styles are located. Notice the style tag <style type="text/css">.
2. Highlight all the CSS styles created so far. In this example we have a few styles for h1, h2, p and so forth.
3. Right-click on the selected area and browse to CSS Styles -> Move CSS Rules.
Alternatively, you can also go to the CSS Styles panel and highlight all the CSS Styles under All Rules then click on the drop down menu and choose Move CSS Rules.
4. In the Move To External Style Sheet dialog box select A New Style Sheet ... and press OK.
5. In the Save In (Windows) or Where (Macintosh) pop-up menu, navigate to your local site folder.
6. Under URL name the file mystyle.css.
Note: You can name a CSS style sheet any name you want, with the following exceptions; the name must be lowercase and contain no spaces.
7. Click Save.
Attach an external style sheet
You'll attach the CSS style sheet you just created to another document in your site. We will attach it to our index.htm that we were working on before.
1. In Dreamweaver, open the Site panel (Window > Site), if it isn't already open.
2. In the Site panel, locate the file named index.htm, and then double-click it to open it in the Document window.
3. In the CSS Styles panel, click the Attach Style Sheet button located at the bottom of the panel.
4. In the File/URL text box, enter the path to mystyle.css or click Browse and in the dialog box that appears navigate to the mystyle.css file, then click OK to select it.
5. In the Attach External Style Sheet dialog box, for Add As, select Link.
6. Under Media, select All.
Note: Several style sheets can be attached to a document. Different style sheets can be used for accessing and viewing the webpage through different meda. For example a print style sheet might eliminate extra images and fit to a regular letter size paper, while a handheld style sheet might make the images smaller and text larger to fit on a handheld device.
7. Select Preview to view the changes in the design window before accepting or click OK to apply the styles immediately.
The selected style sheet links to the current document, and the style attributes are immediately applied.