Site Design: Creating the Style Sheet

STEP SEVEN: CREATE THE STYLE SHEET

Open up a new page in DW and click Text --> CSS Styles --> Attach Style Sheet. Dreamweaver will create a new style sheet for you, so choose a place to save it (the same folder your site will end up in) and give it a name like "style.css" or "stylesheet.css." You'll get a warning message, but ignore it for now.

Once you have a style sheet, you need to create some styles. I recommend creating, at a minimum, styles for BODY and TD. BODY will control basics things like font, font color, and background color, all of which should be duplicated for TD (why? because of Netscape. If you're curious ask me, but trust me this is a wise idea).

To start, click Text --> CSS Styles --> New Style. A dialog box will pop up. Under "Type" (the second category) choose Redefine HTML Tag. Once you do, "body" should pop into first drop-down list. If it doesn't, you can use the drop-down to go find it or simply type body into that box. Leave the last box alone. Once you click OK you'll reach the actual style definition dialogue box:

Notice the categories on the left and the options on the right. We're going to start with the definitions for "Type," which should be highlighted by default. Start by choosing a font in the font drop-down list. Just as with the tag box in the previous screen, you can type in whatever fonts you want here, but DW provides you with some common combinations of fonts, so it's good practice to choose one of these preset combinations. Then set a size for the font—note that DW defaults to pixels; you'll want to change this to point. Explore the other options, such as weight and style and variant, but be sure to specify a color, which will be the color of all the text in the body.

Before clicking OK, you'll want to (at least) specify the background color. Click on Background on the left to reach those options. The first box specifies a background color. Put in the Hex values you decided on from your inspiration research or click the little box to activate DW's color picker.

There are plenty of other options to explore, but remember we're only specifying the basic style of our pages.

Now, you could just repeat all that for TD, but there's an easier way (for once). Click Text --> CSS Styles --> Edit Style Sheet. Double-click on the name of your style sheet. Highlight BODY, click Duplicate, and then type TD into the box. DW will duplicate the style definitions you just made and apply them to TD as well.

At this point, you've created your basic styles. You can always repeat those edit steps above to edit these definitions, or repeat the steps for a new style to redefine tags or make classes (more on that in the future). But now you're ready to actually rough out your index.