Styling text in the CSS Property inspector

Use the CSS Property inspector to easily create, edit, and apply cascading style sheets (CSS) to your document.

• View full-size on Adobe TV
• View more videos like this

Requirements

To complete the tasks demonstrated in this tutorial, you need the following software and files:

Adobe Dreamweaver CS4

• Try
• Buy

Sample files

lrvid4041_dw.zip (ZIP, 3.5MB)

Prerequisite knowledge

Intermediate knowledge of CSS files

Styling text in the CSS Property inspector

In Adobe® Dreamweaver® CS4, you can create and edit cascading style sheets (CSS) using the Property inspector. In this tutorial, you will learn how to use the Property inspector to make minor edits to CSS files, as well as do basic formatting, and focus on isolated elements. While the CSS tab in the Property inspector is not designed to replace the CSS Styles panel in your workflow, having access to the CSS in the Property inspector will make editing and creating styles faster.

The new Property inspector

Dreamweaver CS4 now has two tabs in its Property inspector. In addition to the traditional HTML tab, Dreamweaver CS4 includes a CSS tab. The CSS tab allows you to modify a targeted rule based on the focus on the page, or to create a new rule based on the formatting options. Even better, formatting text using the Property inspector in Dreamweaver CS4 doesn’t automatically create named embedded class styles. To use the CSS tab:

1. Open a document in Dreamweaver, such as the blog.html document included with the sample files for this tutorial.
2. Choose the Property inspector. You can leave the setting to the default HTML tab as this option still allows you to apply ID and class attributes.

   

   Figure 1: The Property inspector
3. Select the parent <div> tag in which your blog post is located.

   

   Figure 2: TChoosing the parent <div> tag
4. Choose the Class menu and scroll to the blogEntry class attribute. Everything in your blog post is styled according to the CSS rule assigned to that attribute.

   

   Figure 3: Choosing a class attribute

Editing CSS through the Property inspector

Although the CSS Property inspector lists the targeted rule based on your current focus, you have access to the full cascade of rules applied to your elements. You can also create a new rule or apply an existing rule. To apply an existing rule:

1. Select an element on your web page that contains text to which you would like to apply a rule. Click the CSS tab. You can see the text properties, such as font family, size, and color, being applied to your text.

   

   Figure 4: Choosing a class attribute

   Tip: Don’t make the assumption that all text properties come from the same rule. To determine the rule defining a particular property, hover the cursor over the Property text box in the CSS inspector and a tool tip appears that tells you the rule from which the property is derived.

2. To change the style of the selection, use the Targeted Rule menu in the Property inspector. From this menu, you can apply a class style, create a new CSS rule, or create a new inline style. You can also use the Cascade section to target an existing rule and make a change.

   

   Figure 5: The Targeted Rule menu

   Tip: The inline style feature is especially useful for creating HTML emails.

3. Select a rule from the Cascade section of the Targeted Rule menu. Change the font color to a desired hue and press Return. Notice that Dreamweaver only applies the color change to the text targeted by the specific rule that you changed.
4. You can also edit properties that are not directly accessible from the Property inspector. To change a property of a target rule that is not accessible from the Property inspector, select the rule you want to change from the Targeted Rule menu.
5. Click Edit Rule in the Property inspector. The CSS Rule Definition dialog box appears. In this dialog box, you have the same editing options that are available on the CSS Styles panel.

   

   Figure 6: The CSS Rule Definition dialog box
6. To introduce more space between elements on a page, for example, choose Box from the Category pane on the left side of the CSS Rule Definition dialog box. Apply a bottom margin by deselecting Same For All and entering the desired number of pixels in the Bottom text box. Click OK to close the dialog box and apply the style change.

Creating new rules using the Property inspector

You can use one of two methods in the Property inspector to create new rules. You can select text that does not have a specific rule applied to it and just begin formatting it, or you can choose to create a new rule from the Targeted Rule menu. To create a new rule:

1. Highlight some text on your web page that does not have a specific rule applied, such as a sentence in the middle of a paragraph. Note that the Targeted Rule menu says New CSS Rule.
2. Choose Edit Rule from the Property inspector. The New CSS Rule dialog box opens. Dreamweaver automatically chooses Class (which can apply to any HTML element) from the Selector Type menu.
3. Enter a name for your selector in the Selector Name text box.
4. Use the Rule Definition menu to choose where the rule is written. Choose styles.css to write the rule to your external CSS document. Click OK. The CSS Rule Definition dialog box opens (as shown in Figure 6.) Notice the property boxes are all empty.
5. Select Background from the Category pane. Then, select Background Color. Click the color box and choose a color from the color picker. Click OK to close the CSS Rule Definition dialog box.

   

   Figure 7: Creating a new class
6. Deselect the highlighted text in your Dreamweaver document. Notice that a background color has been applied to the text.

   

   Figure 8: Applying a new class
7. To apply your new class to additional text, highlight the text and choose the class from the Targeted Rule menu in the Property inspector.

Where to go from here

• Dreamweaver CS4 Help and Support
• Learn Dreamweaver CS4
• Introducing Dreamweaver CS4, by James Williamson
• Working with Related Documents, by James Williamson
• Using JavaScript, DOM, and Spry code hinting, by James Williamson
• Lynda.com

This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.

About the authors