Inserting and Formatting Text > Using CSS style sheets > Creating and linking to an external CSS style sheet

Creating and linking to an external CSS style sheet

A CSS style sheet is an external text file containing styles and formatting specifications. When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits. You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.

Dreamweaver Help consists of HTML pages that use a linked CSS style sheet called help.css. To see what the code for a CSS style definition looks like, open the help.css file (located in the Help/html folder) in a text editor. Open any of the topic files (those that begin with a number) to see how the CSS style sheet is linked to the document using a link tag, as well as how specific CSS styles are applied. You can also copy the help.css file to your local root folder and apply its styles to a test page.

To attach an external CSS style sheet:

1	Choose Window > CSS Styles, or click the CSS Styles icon in the Launcher.
2	In the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Attach Style Sheet from the pop-up menu. You can also click the Attach Style Sheet icon at the bottom of the CSS Styles panel.
3	In the Select Style Sheet dialog box, enter the file name in the URL field, or browse for the file you want.
4	Select a document or site root-relative path. See About document locations and paths.
5	Click Open. The style sheet is attached to your Dreamweaver document and its styles appear in the CSS Styles panel.

To link to or create an external CSS style sheet:

1	Choose Window > CSS Styles, or click the CSS Styles icon in the Launcher.
2	In the CSS Styles panel, right-click (Windows) or Control-click (Macintosh) and choose Edit Style Sheet from the pull-down menu.
3	In the Edit Style Sheet dialog box, click Link.
4	In the Link External Style Sheet dialog box, do one of the following:
	Click Browse (Windows) or Choose (Macintosh) to browse to an external CSS style sheet, or type the path to the style sheet in the File/URL box. (Browsing is recommended because it ensures that the correct path to the style sheet is entered.)
	Create a new external CSS style sheet by entering a new file name (one that doesn't already exist at the specified location). The file name must end in the .css extension.
5	Select the Link or Import option to specify and create the tag used to attach the external CSS style sheet to the document, and then click OK.
	Import brings the information in the external CSS style sheet file into the current document, while Link accesses and relays the information without transferring it.While both Import and Link call all styles in the external CSS style sheet into the current document, Link offers more features and works in more browsers.
	The name of the external CSS style sheet appears with the identifier (link or import) in the list of styles in the Edit Style Sheet dialog box. Complete the steps below to create or edit the styles defined in the external CSS style sheet.
6	In the Edit Style Sheet dialog box, select the name of the external style sheet and click Edit.
	The Edit Style Sheet dialog box appears for that style sheet.
7	Click New to define styles in the external CSS style sheet.
8	In the New Style dialog box, define the new style. See Creating a CSS style in Dreamweaver.
9	Click Save when you have finished defining styles.