GS-08: Controlling CSS from the Property Inspector - Dreamweaver CS5

Perform CSS-related tasks directly from the Property inspector, without having to go the CSS Styles panel. Style font, font size, color, and more for any existing targeted rule.

How to Edit CSS with the Property Manager

The Property Manager allows you to edit CSS directly on the page with just a few clicks of a button. The instructions listed below will guide you through the basics of how to start editing your CSS with the Property Manager.

  1. Open the Property inspector (if it isn't already open) and click the CSS button.

    To re-open the Property Inspector window :

    1. Go to the Window menu
    2. Select Properties.
  2. Select the text element by doing one of the following:
    • Place the insertion point inside a block of text that’s been formatted by a rule you want to edit.The rule appears in the Targeted Rule pop-up menu.
    • Select a rule from the Targeted Rule pop-up menu.

Changes can now be made to the rule by using the various options in the CSS Property Inspector.


Property Inspector: CSS Editable Options

The CSS Panel opens the CSS Styles panel and displays properties for the targeted rule.

Note: The Font, Size, Text Color, Bold, Italic, and Alignment properties always display the properties for the current selection in the document window. When any of these properties are altered, the targeted rule is affected globally.
  • Font changes the font of the targeted rule.
  • Size sets the font size for the targeted rule.
  • Text Color sets the selected color as the font color in the targeted rule.
    • Users can select a web-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.
    • Users can also "chip" colors off of other elements and apply them to a text element.
  • Bold adds the bold property to the targeted rule.
  • Italic adds the italic property to the targeted rule.
  • Left, Center and Right Align add the respective alignment properties to the targeted rule.

Targeted Rule

Targeted Rule allows users to have existing style applied to text via the Property Inspector. This rule affects how the text’s format appears when a user clicks inside the text on the page.

The Targeted Rule pop-up menu allows users to create new CSS rules, create new inline styles or apply existing classes to selected text. Users can create new rules by completing the New CSS Rule dialogue box.

Edit Rule

Edit Rule opens the CSS Rule Definition dialogue box for the targeted rule. By selecting New CSS Rule from the Targeted Rule pop-up menu and clicking the Edit Rule button, the New CSS Rule definition dialogue box will open.


Getting Started Videos


Dreamweaver is a popular Adobe program for creating websites and applications.  It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.

You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV.  The video in this article is courtesy of Adobe TV.