How to Switch between CSS and HTML Mode in the Dreamweaver Property Inspector - dummies

How to Switch between CSS and HTML Mode in the Dreamweaver Property Inspector

By Janine Warner

The Property inspector, which is accessible from the bottom of the Dreamweaver workspace, displays the properties available to any selected element on the page. Thus, the options in the Property inspector are different when an image is selected than when text is selected, for example.

When nothing is selected, or when you select text on a page, the Property inspector is split into two sections: HTML and CSS.


Note that buttons on the left side of the Property inspector make switching between these two modes easy.


If you’re new to CSS and HTML, understanding the differences between these two modes can be a little confusing. Essentially, if you use a formatting icon such as bold in HTML mode, Dreamweaver adds the HTML <strong> tag, which makes text appear bold in most web browsers. If you use the same icon in CSS mode, Dreamweaver automatically creates a style rule that includes the bold formatting option.

In CSS mode, you can also choose to edit existing styles to add new formatting options to styles that are already applied to text, images, or other elements on a page. You can edit an existing style by simply selecting the style in the Targeted Rule drop-down list and then using the Font, Size, and other fields in the Property inspector to make changes or additions.

Whenever you edit an existing style that has already been applied to elements on a page, the changes you make to the style are applied automatically anywhere the style is used. This feature is wonderful when you want to change several things at once but can be problematic if you want to make an element (such as a heading) appear one way on one page and another way somewhere else.

Anytime you want to create or edit a style, use the Property inspector in CSS mode. On the other hand, to apply an existing style to an element on the page, make sure you’re in HTML mode. For example, to align an image with a class style or apply an ID style to a <div> tag, you need to be in HTML mode.

To apply a style in HTML mode, select the image, text, or other element in the page where you want to apply the style and then use the Class or ID drop-down lists to select the style; Dreamweaver automatically applies it.

Similarly, to apply an HTML tag, such as the <h1> tag, you should be in HTML mode. But you create or edit a CSS rule for the <h1> tag in CSS mode. Of course, you don’t have to create or edit styles with the Property inspector. Consider this a shortcut method; you may still prefer to use the CSS Designer panel to make significant changes to a style.