Controlling CSS from the Property Inspector - Dreamweaver CS5

Perform CSS-related tasks directly from the Property inspector without having to go to 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 has 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.

• 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 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 an existing style applied to text via the Property Inspector. This rule affects how the format of the text appears when a user clicks on 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 the 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

• What is Dreamweaver CS5?
  1. Defining a New Site
  2. Creating New Documents
  3. Adding Structure to Text
  4. Managing Assets
  5. Placing Images on the Page
  6. Creating Links
  7. Understanding Style Sheets (CSS)
  8. Controlling CSS from the Property Inspector
  9. 9. Using Live View and CSS Inspect

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

You can learn more about Dreamweaver by visiting Adobe's website or the Dreamweaver Tutorials learning portal.