Create a new CSS rule

In this section you'll use the CSS Styles panel to create a custom CSS rule, or class style. Class styles let you set style attributes for any range or block of text, and can be applied to any HTML tag. For more information on different types of CSS rules, see Learn about CSS.

In the CSS Styles panel, click New CSS Rule in the lower-right corner of the panel.

In the New CSS Rule dialog box, select Class from the Selector Type options. It should be selected by default.

Enter .bold in the Name text box.

Make sure that you type the period (.) before the word "bold." All class styles must start with a period

Select cafe_townsend.css from the Define In pop-up menu. It should be selected by default.

Click OK.

The CSS Rule Definition dialog box appears, indicating that you are creating a class style called .bold in the cafe_townsend.css file.

In the CSS Rule Definition dialog box, do the following:

In the Font text box, enter Verdana, sans-serif.

In the Size text box, enter 11 and select pixels from the pop-up menu immediately to the right.

In the Line Height text box, enter 18 and select pixels from the pop-up menu immediately to the right.

Select bold from the Weight pop-up menu.

Enter #990000 in the Color text box

TIP

For more information about any CSS property, check the O'Reilly reference guide included with Dreamweaver. To display the guide, select Help > Reference and select O'Reilly CSS Reference from the pop-up menu in the Reference panel.

Click OK.

Click All at the top of the CSS Styles panel.

Click the plus (+) button next to the cafe_townsend.css category if the category isn't already expanded.

You'll see that Dreamweaver added the .bold class style to the list of rules defined in the external style sheet. If you click the .bold rule in the All Rules pane, the rule's properties appear in the Properties pane. The new rule also appears in the Style pop-up menu in the Property inspector.

Comments

No screen name said on Dec 15, 2005 at 1:43 AM :

In the CSS Styles panel the "Current" option is always displaying the message: "No CSS properties apply to the current selection........"
This message never changes even when I select styled content.

No screen name said on Aug 24, 2006 at 8:02 AM :

hello;
I created a CSS class called ".bold" as said in Tutorial.
But i can`t choose the font size 11 px,mine values are either 10 or 12 px? and the line-height also is definded as standard,i can´t choose a value of 18 px, why it is so?

No screen name said on Aug 27, 2006 at 10:01 AM :

just type in your own size px..dont choose from the drop down menu

SingleDadz said on Nov 25, 2006 at 6:01 PM :

Help file- Create new CSS rule

It says all class styles must have a (.) period before them ex.-(.bold) but style (p) and (body) do not have periods?

No screen name said on Dec 9, 2006 at 1:05 AM :

Why Style rule P doesn't have a period before it?

No screen name said on Mar 29, 2007 at 8:12 AM :

Have the same prob as the 1st comment. Stylesheet is not being applied to the text. Checked HTML and link is present. cafe_townsend.css is in the css styles tab and the <p> and .bold styles are present. However any text styled as <p>on the page doesn't inherit the style!

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_06_c8.htm