How to Create Internal and External Style Sheets in Dreamweaver

By Janine Warner

When you create new styles in Dreamweaver, you need to decide whether to save the style in an internal or external style sheet. In an internal style sheet, the style rule is saved at the top of the HTML document where you want to apply the style. In an external style sheet, new styles are saved in a separate document that can be attached to any file in your website.

External style sheets offer the greatest advantages because using one set of styles across many pages is more efficient than creating styles for each page in your site. That said, sometimes internal style sheets are a good choice, such as when you’re creating a style that will apply only to elements on one page.

How to create an internal style sheet in Dreamweaver

Internal style sheets are saved in the same HTML file where they are applied. Thus, you don’t create a file when you create an internal style sheet, as you do when you create an external sheet.

Instead, when you create an internal style sheet, you simply add <style> tags within the <head> tags at the top of the HTML file you have open in Dreamweaver. Then, when you create styles, you save the new style rule definitions within the <style> tags in your file.

Creating a new internal style in Dreamweaver requires just two steps. First click the plus (+) icon in the Sources panel at the top of the CSS Designer panel. Then select Define in Page from the drop-down list. You’re done. Dreamweaver inserts the <style> tags into the code in your file, and lists the internal style sheet in the Sources panel with the <style> tag.


How to create an external style sheet in Dreamweaver

At the very top of the CSS Designer panel, you find the Sources panel. This panel displays the name or names of any style sheets available to the open page. This same panel is used to create or link to style sheets as you create or apply styles.

To create an external style sheet, first create and save a new HTML file or open an existing file in Dreamweaver, and then follow these instructions:

  1. Click the plus (+) icon in the Sources panel at the top of the CSS Designer panel.

    A drop-down list opens with three options: Create a New CSS File, Attach Existing CSS File, and Define in Page.


  2. Choose the Create a New CSS File option from the drop-down list.

    The Create a New CSS File dialog box opens.

  3. Enter a name for your new style sheet file.

    You can name style sheets anything you like, as long as you don’t include spaces or special characters other than the hyphen (-) or underscore (_).


  4. Select the Link option.

    Link is considered the best practice in most cases and is selected by default in Dreamweaver.

    For the most part, the Import option is used only when would want to apply multiple external style sheets to the page but only want to link to one style sheet. In that case, you could use the Import option to associate multiple style sheets with one.

  5. Click the arrow next to Conditional Usage to view additional settings.

    The Conditional Usage settings are used to set up media queries for style sheets.

  6. Click OK.

    The style sheet is saved and linked to the HTML page you have open in Dreamweaver. Note: If you’re working on a new HTML page, make sure that you’ve saved the page; otherwise, you’ll be unable to create and link a new CSS file.

After you create an external style sheet, you can link that same style sheet to as many pages as you like by following the steps in the exercise that immediately follows. You can also add as many style rules as you like to any external style sheet, which is covered in various exercises that follow on creating class, tag, and other types of styles.