Now that we've set Dreamweaver's preferences for CSS, lets start creating styles! In this section we will create styles for several HTML tags using the CSS Styles Panel and the New CSS Rule dialog box.

Opening the CSS Styles Panel

The Dreamweaver CSS Panel is to the right of your document window. If it is closed, open it by clicking either its name or the black triangle preceding its name.

screen shot of closed CSS panel

Tip

If you want the CSS Panel to open automatically whenever you use Dreamweaver, select Window > CSS Styles on the top menu bar.

Be sure that the CSS Styles tab (rather than the AP Elements tab) is open, and that the All button is selected.

screen shot of open CSS Styles panel

The All panel has two panes -- the top pane will show us the name(s) of the selectors for all of the rules we create while the bottom pane will display the properties and property values defined for the selector that is currently highlighted in the top pane. We'll see an example of this as soon as we define our first rule.

Now in order to actually use the CSS Styles panel, we need to have something to style, so let's begin by opening a new document in the document window.

Best Practices

I encourage you to choose XHTML as your document type -- XHTML Strict is the W3C's recommendation. If you must use HTML, choose HTML 4.01, as this is the only version of HTML designed to work with CSS.

Be sure that you set your document window to Split view, as we will be looking at both the HTML code and the page design throughout the tutorial. The first thing you should notice in the code pane is that we already have one tag, the <body> tag, we can style.

screen shot of new document in Split view

Adding Styles to an HTML Tag

Let's start by adding a style for background color to the body tag. Click on the New CSS Rule button, which is in the lower right corner of the CSS Styles panel.

screen shot showing location of New CSS Rule button

This action will pop up the New CSS Rule dialog box.

screen shot of the New CSS Rule dialog box

There are three choices you need to make in this dialog box in order to create a selector for a new rule; for now, choose the following:

  1. Select the Tag radio button; we will work with classes, IDs and pseudo-classes later.
  2. Use the drop-down menu to select the tag you wish to style (or just type in its name).
  3. For now, create embedded styles (choose "This document only"); you'll learn how to use a style sheet later.

Click OK, and a new box, the CSS Rule definition dialog box, will open.

There are eight categories of styles in the left column of this box, all of which can be applied to the body tag. Click on the second one, Background, to bring up the panel which allows you to style the background of the body tag. Now choose a background color for your page -- I'm choosing a true green for this example, which is far too intense for a background but a very useful choice nonetheless as I will show you how to edit this style later in the tutorial.

screen shot of CSS Rule definition dialog box.

The CSS Rules dialog box allows you to test your style before you accept it -- click the Apply button and look at the Design section of your Document window to see how your background color looks on your page. Try several colors, and when you find a color you like, click OK to finalize your choice.

So where is the style you just created? Look at the Code view of your page, and you will see an embedded style in the head section of your document -- a rule enclosed by HTML <style> tags. As you add additional styles to your site, they will also appear in this block.

screen shot of embedded styles

Now look at the CSS Styles panel; you will see that the body tag has been entered into the All Rules pane, and that the Properties pane shows both the specific property (background-color) that we have styled and the value we gave that property.

screen shot of CSS Styles panel

It is a common practice to assign background colors, background images, and font styles to the body tag -- as these are styles that you want to persist throughout your page -- so let's add some font styles to our body tag. Be sure that body is selected in the All Rules pane, and simply click on the pencil symbol in the lower right corner of the CSS Styles panel to pop open the CSS Rule definition for "body" dialog box, which you can use to add new styles. (Font styles are in the Type category.)

screen shot showing edit symbol in CSS Styles panel

Alternatively, you may prefer to click on the Add Property link in the Properties for "body" pane in the CSS Styles panel; you can then use the drop-down menu in the Properties pane to add new properties and their values directly to the body tag.

screen shot of Properties panel

Tip

Experienced CSS users may notice that the CSS Rule definition box includes most -- but not all -- of the properties defined in CSS. If you wish to use a property (such as min-width or *), that isn't available in the box, simply use the Properties pane to enter the property name and value manually.

Now let's add some text to our page. I've added an h1 heading and two paragraphs to my page so that you can see the effect of the font styles I assigned to the body tag.

screen shot of sample page

I can also style my new tags. First, let's add styles to change the color, font family, and position for the h1 tag. (If you are using the CSS Rule definition box to create your styles, the text formats are in the Type category and the alignment property is in the Block category.)

screen shot of new styles definitions

My page now looks like:

screen shot of sample page

And now I'll add a style to indent my paragraphs (if you are using the CSS Rule definition box to create your styles, the text-indent property is in the Block category)

screen shot of new styles definitions

so that my page looks like this:

screen shot of sample page

Easy! If you are a beginner to CSS, I encourage you to take some time to experiment with the styles in each of the eight selections on the CSS Rule definition for "xxx" box -- create a small HTML document of your own, choose a tag, and use the Apply button to see how various styles effect your sample page.

Editing Styles

Adding styles and editing styles are closely related, and both can be done either in the CSS Rule Definition for "xxx" dialog box or in the Properties pane.

Editing Styles

First click on the selector you wish to edit in the All Rules pane of the CSS Styles panel.

 

  • To edit using the CSS Rule Definition box, open the box (click on the pencil symbol in the lower right corner) and change the property values you wish to edit. To delete a property, simply select its value and either delete it or return it to its default value.
  • To edit using the Properties pane, simply move to the Properties pane, select the property you wish to change, and edit its value. To delete a property, select the property name and then click on the garbage can icon in the lower right corner of the pane.

Now it's time to replace that horrible green background! I've done my editing in the Properties panel, which now looks like this:

screen shot of Properties panel

You can see where I selected the body tag and the background-color property, and then simply changed the color value to a light brown. My sample page now looks like:

screen shot of sample page

Tip

Once you are sure which format (CSS Rule definition box or Properties pane) you prefer to use when editing styles, go back to the Edit > Properties > CSS Styles dialog panel and be sure that the correct radio button is selected. Now, when you need to edit a style, simply double-click on its selector in the All Rules panel and your preferred editing method will open automatically.

Congratulations! You've now finished the most complex part of this tutorial, learning the basics of the CSS Styles panel. We will use this panel to style classes, IDs and links in the following sections.

* click the link below to read the next tutorial *
Styling Classes and IDs