TechNote (Archived)

How to create an external Cascading Style Sheet

This TechNote offers instructions on creating and linking external Cascading Style Sheets (CSS). Before following the steps in this TechNote, a thorough understanding of Cascading Style Sheets is recommended. Consult An Overview of Cascading Style Sheets (TechNote 15230) to learn about the various types of styles in Dreamweaver and their timesaving benefits. See, also, Creating embedded Cascading Style Sheets (TechNote 15231) for step-by-step instructions for creating and changing the various types of styles within the HTML page.

In review, CSS styles provide formatting to control the appearance of content in the Web page. By using an external style sheet, these styles can be applied to multiple documents simultaneously. Further, changes to the styles in the external style sheet will affect all documents using that style sheet. This TechNote offers instructions on:

	External style sheets in Dreamweaver 4 Creating an external style sheet Adding a style to an existing external style sheet Changing a style on an existing external style sheet Attaching an external style sheet to a Dreamweaver document
	External style sheets in prior versions of Dreamweaver Creating a new external style sheet Attaching an external style sheet

External style sheets in Dreamweaver 4
Creating an external style sheet
When you create a new style in Dreamweaver 4, you have the option of defining it in a New Style Sheet File. This option is the easiest way to create an external style sheet, as outlined below.

1	Choose Text > CSS Styles > New Style. Or, click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 to view the buttons at the bottom of the CSS Styles panel.
2	In the New Style dialog box, choose to define a style in a New Style Sheet File ( Example 2).
3	Choose the type of style your first style will be on the external style sheet ( Example 3).
	Make Custom Style (class) After selecting this type of style, type the name of your custom style ( Example 4). Redefine HTML Tag: After choosing to redefine the properties of an HTML tag, you must select the tag to be redefined ( Example 5). Use CSS Selector: If you choose this type of CSS style, you must designate the tags to be affected ( Example 6) or, if you are affecting the appearance of a text link, choose a link state ( Example 7).
4	Click OK.
5	The Save Style Sheet File As dialog box will appear ( Example 8).
6	Browse to locate the site folder or the folder within the site that the style sheets will be located in.
7	Name the CSS file.
8	Choose Save.
9	The Style Definition dialog box appears ( Example 9). These options allow you to define a style in the style sheet you just created.
10	Define your style. Note:For information on specific style settings (Type, Background, Block, Box, Border, List, Positioning, Extensions) in the Style Definition dialog box, choose Help > Using Dreamweaver > Inserting and Formatting Text > Using CSS Style Sheets > Creating a CSS Style in Dreamweaver. This sections provides a detailed description of each of the style settings and the many options.
11	Click OK. If the type of style chosen was a custom style, the name of the style will now appear on the CSS Styles panel with a small link icon next to the stylized s.

Adding a style to an existing external style sheet

1	Click the New Style button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 to view the buttons at the bottom of the CSS Styles panel.
2	In the New Style dialog box, choose the name of the preexisting external style sheet in the Define in pop-up list ( Example 10).
3	Choose the type of style you will be adding to the external style sheet.
	Make Custom Style (class) After selecting this type of style, type the name of your custom style. Redefine HTML Tag: After choosing to redefine the properties of an HTML tag, you must select the tag to be redefined. Use CSS Selector: If you choose this type of CSS styles, you must designate the tags to be affected or, if you are affecting the appearance of a text link, choose a link state.
4	Click OK.
5	The Style Definition dialog box appears ( Example 9). These options allow you to define a style in the external style sheet.
6	Define your style. Note:For information on specific style settings (Type, Background, Block, Box, Border, List, Positioning, Extensions) in the Style Definition dialog box, choose Help > Using Dreamweaver > Inserting and Formatting Text > Using CSS Style Sheets > Creating a CSS Style in Dreamweaver. This sections provides a detailed description of each of the style settings and the many options.
7	Click OK. If the type of style chosen was a custom style, the name of the style will now appear on the CSS Styles panel with a small link icon next to the stylized s.

Changing an existing style on an external style sheet

1	Click the Edit Style Sheet button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 to view the buttons at the bottom of the CSS Styles panel.
2	The Edit Style Sheet dialog box will appear ( Example 11). In the upper left of the dialog box a list of the style sheets currently attached to the Dreamweaver document will appear.
3	Double-click the name of the external style sheet which contains the style you wish to edit.
4	The list of styles in that external style sheet will appear in the upper left of the next dialog box ( Example 12).
5	Select the style you wish to modify.
6	Click Edit.
7	The Style Definition dialog box appears ( Example 9) for that style.
8	Redefine your style. Note:For information on specific style settings (Type, Background, Block, Box, Border, List, Positioning, Extensions) in the Style Definition dialog box, choose Help > Using Dreamweaver > Inserting and Formatting Text > Using CSS Style Sheets > Creating a CSS Style in Dreamweaver. This sections provides a detailed description of each of the style settings and the many options.
9	Click OK.
10	Click Save on the list of the styles for the external style sheet.
11	Click Done on the Edit Style Sheet dialog box.

Attaching an existing external style sheet to an existing Dreamweaver document

1	Click the Attach Style Sheet button at the bottom of the CSS Styles panel (choose Windows > CSS Styles to open this panel). See Example 1 to view the buttons at the bottom of the CSS Styles panel.
2	The Select Style Sheet File dialog box will appear ( Example 13).
3	In the pop-up list at the top of the dialog box, browse to locate the site folder or the folder within the site in which the style sheet is located.
4	Select the style sheet listed in the dialog box to be attached to the Dreamweaver document.
5	Click Select (Windows) or Open (Macintosh).

Creating and linking an external style sheet using a previous version of Dreamweaver
Creating a new external style sheet

1	In Dreamweaver 3, choose Text > CSS Styles > Edit Style Sheet. Or, choose Windows > CSS Styles and click the Open Style Sheet icon at the bottom of the panel. In Dreamweaver 1 and 2, choose Text > Custom Style > Edit Style Sheet.
2	Select Link.
3	In the Link External Style Sheet dialog box, enter a new file name in the text box. The name must have a .css extension. A sample name for an external style sheet is: newstyle.css
4	Click OK.
5	The new style sheet name will appear in the Edit Style Sheet dialog box.
6	Double-click the new external style sheet. This launches a dialog box for the first style on your external style sheet.
7	Click New.
8	The New Style dialog box opens ( Example 14). Select one of the following styles: Make Custom Style (class) After selecting this type of style, type the name of your custom style. Note:Custom style names must begin with a period. Redefine HTML Tag: After choosing to redefine the properties of an HTML tag, you must select the tag to be redefined. Use CSS Selector: If you choose this type of CSS styles, you must designate the tags to be affected or, if you are affecting the appearance of a text link, choose a link state.
9	Click OK.
10	The Style Definition dialog box appears ( Example 9) for that style.
11	Define your style. Note:For information on specific style settings (Type, Background, Block, Box, Border, List, Positioning, Extensions) in the Style Definition dialog box, choose Help > Using Dreamweaver > Inserting and Formatting Text > Using CSS Style Sheets > Creating a CSS Style in Dreamweaver. This sections provides a detailed description of each of the style settings and the many options.
12	Click OK.
13	This closes the New Style dialog box and brings you back to the dialog box for that external style sheet's list of styles. (To add additional styles to your external style sheet, again double-click the external style sheet to return to the New Style dialog box. Repeat steps 11 and 12.)
14	When you have finished adding styles to your external style sheet, click Save to close the external style sheet's list of styles.
15	Now you will see the Edit Style Sheet dialog box.
16	Click Done.
17	The custom styles in the external style sheet will be listed on the CSS Styles panel. The style sheet will be located at the root level inside of your site root folder.

Attaching an external style sheet

1	In Dreamweaver 3, choose Text > CSS Styles > Edit Style Sheet. Or, choose Windows > CSS Styles and click the Open Style Sheet icon at the bottom of the panel. In Dreamweaver 1 and 2, choose Text > Custom Style > Edit Style Sheet.
2	Select Link.
3	In the Link External Style Sheet dialog box, click Browse (Windows) or Choose (Macintosh).
4	Browse to find the external style sheet. Select the external style sheet.
5	Click Select (Windows) or Open (Macintosh).
6	The name of the external style sheet will appear in the File/URL text box. Choose to Link or Import. (Link offers more features and works in more browsers.)
7	Click OK.
8	The external style sheet will now appear in the Edit Style Sheet dialog box. Click Done. The custom styles in the external style sheet will now appear in the CSS Styles panel.

Additional information
For more information on CSS, consult these Macromedia articles and TechNotes:

	Using Cascading Style Sheets
	Creating different CSS style sheets for different platforms
	Turning off link underlining
	Removing CSS Classes from a Dreamweaver page(TechNote 15119)
	How to remove the underline from linked text (TechNote 14088)
	How Can I update HTML styles? (TechNote 14245)

The Inserting and Formatting Text sections of Using Dreamweaver and Dreamweaver Help provide additional material on the subject of CSS. See also W3C's recommendations for CSS, as well as an excellent listing of resources devoted to CSS, the W3C's Cascading Style Sheets home page.