How to: Use the Direct Style Application Toolbar
The Direct Style Application toolbar lets you create and modify styles. You can use the Direct Style Application toolbar with other CSS tools in Visual Studio. This includes the CSS Properties window, the Manage Styles window, and the Apply Styles window.
If you style a page element that does already not have a CSS style rule, you can use the Direct Style Application toolbar to generate and apply a new style. For example, you might select a paragraph and apply color to the text by using the Direct Style Application toolbar. In that case, Visual Studio creates a new CSS style rule and applies it to the text. If you format another property of the same paragraph, such as the paragraph's font family, Visual Studio adds a new property declaration to the generated style rule.
Working with the Direct Style Application Toolbar
You can use the Direct Style Application toolbar to generate and modify styles in Auto mode or Manual mode. If you are new to authoring CSS, use Auto mode to have Visual Studio automatically generate style rules. If you are an experienced CSS author, you can use Manual mode, which gives you the best control over how a style rule is written.
In Manual mode, you can add a new property declaration to a different style. This includes a new style, a different generated style, or a style that you have created. When you use Manual mode, Visual Studio will add elements to a Web page if necessary to correctly assign the style.
An Overview of the Direct Style Application Toolbar
The following table lists the elements of the Direct Style Application toolbar.
.gif "Note") Note: |
|---|
   When you are working in Auto mode, the Target Rule drop-down list is disabled and the ReUse Existing Style button is disabled. |
Element |
Description |
.png "direct styel application tool mode selector") |
The Style Application drop-down list lets you set the mode in which styles are generated and modified. If you are new to authoring CSS, use Auto mode. If you are an experienced CSS author, you can use Manual mode to streamline the design process. |
.png "direct style application tool rule selector") |
The Target Rule drop-down list affects new CSS properties. You can use it to view the name of the style to be modified or the type of style that is created for the current element. By default, the style that has the highest precedence is targeted. If no style exists, New Auto Class becomes the default. The Target Rule drop-down list provides the following options. The effect of each option depends on the current selection.
|
.gif "direct style application toolbar reuse button") |
TheReuse Existing Style button affects changes that have been made to existing styles and properties. If the selected style does not contain a declaration for the property you format, but another style in the current selection does, Reuse Existing Style determines which style is modified. When Reuse Existing Style is selected, the property that already contains a declaration is modified. When Reuse Existing Style is not selected, the targeted rule is modified. |
.gif "direct style application toolbar overlay button") |
TheShow Overlay button specifies whether an overlay is shown on elements that the selected rule applies to. When this option is selected, the designer displays a dotted box around content that uses the style that is selected in the Target Rule drop-down list. The overlay lets you see which elements are affected by changes that you make by using the Direct Style Application toolbar. This is especially useful when you are applying multiple rules, because it makes it easier to access a specific rule to modify. |
Using the Direct Style Application Toolbar with ASP.NET Controls
You can use the Direct Style Application toolbar to change styles on ASP.NET server controls that support styling. You can use the toolbar to apply styles to server controls that define properties for inline styles and for the CssClass attribute, and that inherit from the WebControl class. User controls do not have these properties defined. Therefore, you cannot use the toolbar with user controls.
ID-based style rules should not be used with server controls. The name that is assigned in markup or in server code is not necessarily the ID of the HTML element that is rendered. Therefore, IDs are not a reliable way to style server controls.
Using the Direct Style Application Toolbar
You can set the application mode on the Direct Style Application toolbar to determine how style rules are created.
To set the application mode on the Direct Style Application toolbar
- On the Direct Style Application toolbar, click the Style Application drop-down list, and then click Auto or Manual.
The Direct Style Application toolbar is a fast way to create new styles or to modify existing style rules.
To create new styles by using the Direct Style Application toolbar
In Design view or Source view, switch to Manual style-application mode.
Select the content that you want to format.
On the Direct Style Application toolbar, click the Target Rule drop-down list, and then do one of the following:
To generate a new style that is based on the formatting you apply, and to apply the style to the current content, select New Inline Style, New Auto ID, or New Auto Class, and then format the content.
To design a new style by using the New Style dialog box and optionally apply the style to the current selection, select Apply New Style.
You can modify an existing style rule that is applied to a selection, or you can create a new property declaration for a style rule.
To modify existing styles by using the Direct Style Application toolbar
In Design view or Source view, switch to Manual style-application mode.
Select the content that you want to format.
On the Direct Style Application toolbar, in the Target Rule list, click the style that you want.
If the selected style does not contain a declaration for the property you format, but another style in the current selection does, select Reuse Existing Style to modify the existing style.
Format the content.