How to Attach an External Style Sheet to a Page in Dreamweaver - dummies

How to Attach an External Style Sheet to a Page in Dreamweaver

By Janine Warner

After you’ve created an external style sheet in Dreamweaver, you can attach it to any web page. In the step-by-step instructions that follow, you can use any of the predefined style sheets included in Dreamweaver, or you can use these instructions to attach any style sheet you create using the steps in the previous exercise.

Begin by opening the page to which you want to attach the style sheet and then follow these steps:

  1. Click the plus (+) icon in the Sources panel at the top of the CSS Designer panel and choose Attach Existing CSS File from the drop-down list.

    The Attach Existing CSS File dialog box opens.

  2. Click the Browse button and locate the CSS file in your local site folder.

    You can also enter a URL if you want to use a remote CSS file located on another website, but it’s most common to use a style sheet contained in the website you’re working on.

  3. Select the Link or Import option.

    If you’re attaching a style sheet to an HTML file, your best choice is almost always to choose Link, which is the default. Choose Import if you want to create one master external style sheet that contains references to other style sheets, an advanced option that enables one style sheet to refer to another.

  4. (Optional) Choose options from the Conditional Usage section.

    Use the Conditional Usage features to define a media query as you attach your style sheet.

  5. Click OK.

    The dialog box closes, and Dreamweaver sets the link to the style sheet by adding a line of code to the top of the HTML file. After you link an external style sheet, any applicable styles are automatically applied to the content in the page in Dreamweaver and the selector names of the styles defined in the style sheet become visible in the Selectors panel of the CSS Designer panel.

You can attach multiple style sheets to the same HTML page, and you can use internal and external style sheets in the same document. For example, you can save your text styles in one style sheet, save your layout styles in another, and then attach both to the same document — which makes all the defined styles available to the page.

Similarly, you create different style sheets for different purposes, such as one for printing the file and another for browser display.