Style Application toolbar

Article
10/10/2017

The Style Application toolbar is a critical tool when you use Microsoft Expression Web in Manual style application mode to author your cascading style sheets (CSS). You use the Style Application toolbar in tandem with all of the other CSS and formatting tools in Expression Web.

You can use the Style Application toolbar to set the style application mode of Expression Web to Auto or Manual. If you select Manual mode, you can also use the Style Application toolbar to determine how Expression Web creates or updates styles in a web page.

Use this	To do this
Target Rule box	View the name of the style that Expression Web will modify or the type of style it will create when you format content in your web page. By default, Expression Web targets the style that has the highest precedence. The Target Rule drop-down box in the Style Application toolbar provides the following options, depending on the current selection: Inline Style Revise an existing property declaration or add a new property declaration to an existing inline style. New Inline Style Add the property declaration to a new generated inline style and apply the style to the current selection. New Auto ID Create a new generated style for an applied ID that doesn't have a rule set. New Auto Class Either create a newly-generated style for an applied class that doesn't have a rule set, or add a property declaration to a new auto-generated class and apply the style to the current selection. Apply New Style Create a new style by using the New Style dialog box and optionally apply the style to the current selection.
Reuse Properties box	If the style selected in the Target Rule box doesn't contain a declaration for the property you format but another style in use by the current selection does, Reuse Properties determines which style Expression Web modifies. When Reuse Properties is selected Expression Web modifies the property that already contains a declaration and when Reuse Properties isn't selected Expression Web modifies the targeted rule.
Show Overlay button	In Design view, display a dotted box around content using the style selected in the Target Rule box.

Target Rule box

View the name of the style that Expression Web will modify or the type of style it will create when you format content in your web page. By default, Expression Web targets the style that has the highest precedence.

The Target Rule drop-down box in the Style Application toolbar provides the following options, depending on the current selection:

Inline Style Revise an existing property declaration or add a new property declaration to an existing inline style.
New Inline Style Add the property declaration to a new generated inline style and apply the style to the current selection.
New Auto ID Create a new generated style for an applied ID that doesn't have a rule set.
New Auto Class Either create a newly-generated style for an applied class that doesn't have a rule set, or add a property declaration to a new auto-generated class and apply the style to the current selection.
Apply New Style Create a new style by using the New Style dialog box and optionally apply the style to the current selection.

Reuse Properties box

If the style selected in the Target Rule box doesn't contain a declaration for the property you format but another style in use by the current selection does, Reuse Properties determines which style Expression Web modifies. When Reuse Properties is selected Expression Web modifies the property that already contains a declaration and when Reuse Properties isn't selected Expression Web modifies the targeted rule.

Show Overlay button

In Design view, display a dotted box around content using the style selected in the Target Rule box.

Do one of the following:

In Design view or Code view, in your web page, in the status bar at the bottom of the program, either double-click Style Application or right-click Style Application, and then click Show Toolbar.
On the View menu, point to Toolbars, and then click Style Application.
On the Format menu, point to CSS Styles, and then click Style Application.

See also

Tasks

Concepts

Additional resources

Style Application toolbar