Attaching CSS Files

The power of CSS is evident when you begin maintaining a site using one common style sheet file. This file must have a .css file extension. Since you have already created a common CSS file, you need to attach it to other pages on your site. Here's how to attach a style sheet to individual pages on your site.

1. Click the Attach Style Sheet icon in the CSS Styles palette.
2. Navigate to your site files and folders, highlight your CSS file, and click Select.
3. Any CSS styles that were previously created in your style sheet will now show up on your CSS Styles palette.

   

Note that in this manner, you must attached the style sheet file individually to each page. Currently, Dreamweaver does not offer a quick utility to attach a common CSS file to all the pages on your site, although this feature has been requested for the next version of Dreamweaver.

As you can see, the process of attaching the style sheet to a page requires a few steps. This may not be a problem if you are maintaining a small site, but it could be an incredible inconvenience if you are maintaining a larger site with hundreds of pages.

The good news is that once your common CSS file is attached to the page, that link remains until you manually remove it, so attaching the CSS file is a process that you only need tackle once.

The best option, however, is to attach your common CSS file to your templates. We already learned how to use templates to manage your site effectively and efficiently. Attaching your common CSS file to the template ensures that all new pages created with that template already have the CSS file attached.