Accessibility
Adobe
Sign in Privacy My Adobe

Community Publishing

Created:
2009-08-02
Last Updated:
2011-10-27
by
User Level:
Beginner
Products:
Dreamweaver CS 3.04.0


Need more tips and tutorials?


Automatically attaching a style sheet to new documents

Using an external style sheet is the most efficient way to give your web pages a unified look. As long as the style sheet is linked to each page in your website, you can make sitewide changes rapidly and easily just by changing the rules in the external style sheet. The New Document dialog box in Dreamweaver CS3 and CS4 makes it easy to attach style sheets automatically to every new page you create in a site.

  1. In the Files panel, select the site you plan to work with. If you haven't yet defined a site, follow the instructions for defining a site in the Dreamweaver help files.
  2. If your site already contains a style sheet, skip to step 3. Otherwise, select File > New to open the New Document dialog box. Select Blank Page and CSS as the Page Type, and click Create. This creates a blank style sheet, where you can build your style rules later. Save the style sheet, giving it a name that ends with .css. It's considered good practice to save style sheets in a separate folder called styles or css.
  3. Open the New Document dialog box by selecting File > New, and make sure Blank Page is selected.
  4. Click the Attach Style Sheet icon at the bottom right of the New Document dialog box, as shown in the following screenshot:

    Attach Style Sheet icon in New Document dialog box
  5. Click the Browse button in the Attach External Style Sheet dialog box, and navigate to your style sheet. When you select the style sheet and click OK (or Choose on a Mac), Dreamweaver might display the following warning:

    Warning about file path

    This is perfectly fine. Just click OK to dismiss the warning.
  6. The style sheet should now be listed in the File/URL text box, as shown in the next screenshot.

    dialog box

    Don't worry if the path begins with file:///. Dreamweaver will sort out the correct location when you create your first web page.
  7. Optional: Set the "Add as" radio button to Link or Import, depending on how you want to attach the style sheet. If you are unsure, choose Link. This is the most common method of attaching a style sheet.
    You can also set the Media type for the style sheet by selecting one of the values from the pop-up menu, or by entering a comma-separated list of media types. Selecting the media type specifies how the style sheet is to be used. For example, you might want to have separate style sheets for screen (visual browsers) and print. If you are unsure, leave this field blank.
  8. Click OK to close the Attach External Style Sheet dialog box. The style sheet should now be listed in the Attach CSS file field at the bottom right of the New Document dialog box, as shown here:

    New Document dialog box
  9. If you want to add more than one style sheet to each page, repeat steps 4 through 8 for each additional one.
  10. In the New Document dialog box, select the type of page you want to create, and click Create.
  11. Save the page, and open Split view or Code view. The style sheet should be linked to the page, as shown in the next screenshot. In Dreamweaver CS4, the style sheet will also be listed in the Related Files toolbar at the top of the Document window.

    Web page showing links

Any styles in your style sheet will be applied to the content in your page.

Whenever you create a new page in the same site, the style sheet(s) will automatically be linked to the page, as long as you use the New Document dialog box. This automatic attachment is specific to each Dreamweaver site, so you can switch to work temporarily on another site without worrying that the wrong style sheet will be attached to your pages.

To remove a style sheet from this automatic attachment, select it in the Attach CSS file field at the bottom right of the New Document dialog box, and click the trash can icon as shown here:

Removing a style sheet

 

About the contributor 

David Powers is an Adobe Community Expert and Adobe Certified Instructor for Dreamweaver. He is the author of The Essential Guide to Dreamweaver CS4 with CSS, Ajax, and PHP, and other books on PHP and web design (http://foundationphp.com/).

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License