Creating an External Style Sheet

Up to now, this chapter has covered how to create internal styles, but we also mentioned that internal styles may not always be the right choice. Here's how to create a new external style sheet, either from scratch or using one of the many design files that are included in Dreamweaver as a starting point.

To create a new external style sheet based on a design file:

1.	From Dreamweaver's menu, choose File > New. The New Document dialog appears ( Figure 5.55 ). Figure 5.55. The New Document dialog lets you create many different types of files.
2.	If it wasn't chosen by default, select the category "CSS Style Sheets" to see a long list of style sheets display in the center column ( Figure 5.56 ). Choose any of these to see a preview and description in the right column. Figure 5.56. Dreamweaver comes with plenty of CSS designs for you to use as starting points.
3.	If you see a design you like, click Create. A new untitled style sheet document will open that contains the rules defined in the style sheet you selected. Save this file with a name that ends in . css .

To create a new external style sheet from scratch:

1.	Choose File > New. The New Document dialog appears (Figure 5.55).
2.	In the New Document dialog, select Basic page for the Category, CSS for the page type, and click Create. A new blank style sheet opens in Code view ( Figure 5.57 ). Save this file with a name that ends in .css . Figure 5.57. A blank CSS document, ready for you to add your rules. or

1.	With a document open, click the Insert Div Tag button in the Common or Layout category of the Insert Bar, and the Insert Div Tag dialog displays. Click New CSS Style, and the New CSS Rule dialog opens ( Figure 5.58 ). Figure 5.58. The Insert Div Tag dialog opens the New CSS Rule dialog.
2.	Enter any class , tag , id , or pseudo-class selector that you'd like in your new CSS file. Set Define in to "(New Style Sheet File)" and click OK. The Save Style Sheet File As dialog appears ( Figure 5.59 ). Figure 5.59. If you said you wanted a new style sheet file, here's where it's actually created.
3.	Choose a file name that ends in . css , and click Save. The CSS Rule Definition dialog appears ( Figure 5.60 ). Add the rules you want (as described earlier in this chapter), click OK, and you'll be back at the Insert Div Tag dialog, with your new style sheet (including any rules you set) open in Code view behind the current document. Figure 5.60. Now that you've created a new style sheet file, you need to add rules to it.

Tip

• If you've created a new style sheet using the Insert Div Tag dialog, your new style sheet is automatically attached to your document. If you created the new style sheet any other way, you'll have to attach it manually. That's covered in "Attaching a Style Sheet," next .