Expression Web uses CSS to apply changes to your web pages. Depending upon what you are editing, Expression Web will use a combination of inline styles, embedded styles, and external styles. Take control of how Expression Web generates CSS code by learning how to use the Style Application toolbar.
Download a free chapter of Jim Cheshire "The Microsoft Expression Web Developer's Guide to ASP.NET 3.5"
Introduction
Many Expression Web users are unaware of how to take advantage of the Style Application toolbar. Learning how to effectively use the Style Application toolbar is critical if you want to maintain control over how Expression Web applies CSS to your pages and avoid future frustration.
Using the Style Application Toolbar
WYSIWYG design tools lull us into a pattern of ignoring the code that is being generated. It's simply too easy to get into a pattern of clicking and dragging without any thought at all as to how the application is applying the changes we're making. This is one of the most common mistakes I see users of Expression Web making, and it's a mistake that can cost you a lot of heartache down the road.
Let's look at a simple example based on Expression Web's default behavior. If I insert a <div> in Expression Web and then click the toolbar button that centers content in that <div>, Expression Web will add a "class" attribute to my <div> tag like so:
class="style1"></div>
The "style1" class is defined as an embedded style in the <head> section of my page as follows:
<style type="text/css">
.style1 {
text-align: center;
}
</style>
This is perfectly valid code, so why not just let Expression Web have its way? To begin with, the name "style1" isn't descriptive and that can cause confusion later as the number of CSS classes grows. I may also have an external style sheet that styles the div selector, and I may prefer to have any CSS changes applied to that style sheet instead of having a new style created in the page I am editing.
The Style Application toolbar allows you to take control over how Expression Web generates CSS code, and you can use the Style Application toolbar to quickly switch between the two different style application modes in Expression Web; Manual mode and Auto mode.
To access the Style Application toolbar, select View, Toolbars, Style Application. Alternatively, you can double-click on the Style Application area of the Status Bar as shown below.
The Style Application toolbar consists of a dropdown with which you can switch between style application modes. When in Auto mode, Expression Web will design where to place CSS code and all other items on the toolbar are disabled. When you select Manual in the dropdown as shown below, you have access to several items allowing you to control how CSS code is applied.
In the page shown above, I have centered the alignment of the <div> with the style application mode set to Auto. Expression Web created a new embedded style called "style1" and applied it to the <div> in order to apply that change. If I leave the style application mode set to Auto, any other CSS changes applied to the <div> would cause the "style1" CSS class to be updated with the new settings. However, if I change the style application mode to Manual, I can use the Target Rule dropdown to control how Expression Web applies CSS code as shown below. (It's a good idea to choose your desired Target Rule setting before you make any CSS changes to an element.)
The following options are available on the Target Rule dropdown in my particular case. (The options available to you will differ depending on the element that is selected in Expression Web.)
- .style1 (Current Page) - Selecting this option will cause any CSS changes to update the "style1" CSS class in the current page.
- div (styles.css) - Selecting this option will cause any CSS changes to update the "div" selector in an attached style sheet called styles.css. (This style sheet is linked to the current page.)
- (New Inline Style) - Selecting this option will cause CSS changes to be applied to a new inline style using the "style" attribute on the <div> element.
- (New Auto Class) - Selecting this option will cause CSS changes to be applied as a new automatically generated class. Expression Web uses the naming convention "style#" where "#" is an incrementing numerical value.
- Apply New Style - Selecting this option will open the New Style dialog so that you can create a new CSS style and apply it to the element.
Just to the right of the Target Rule dropdown is the Reuse Properties button. If the selected element is already styled using an existing CSS class (as it is in this case), ID, or inline style, pressing this button will cause Expression Web to edit the existing CSS code when changes are made. For example, in the above scenario, the <div> is styled using the "style1" class. Therefore, if the Reuse Properties button is selected and I make changes to the <div>, Expression Web will modify the existing "style1" class in the current page. If I do the same without pressing the Reuse Properties button, Expression Web uses the selection in the Target Rule dropdown to determine where CSS code is generated.
It's important to realize that pressing the Reuse Properties button overrides the selection in the Target Rule dropdown, but not always as you might expect. To understand how Expression Web behaves with the Reuse Properties button pressed, it's helpful to look at two examples.
In the first example, I'll select "(New Inline Style)" in the Target Rule dropdown and then make a change to the <div> element. Because the <div> element is already styled using the existing "style1" CSS class, Expression Web applies my changes by altering the existing CSS class and ignores my request to apply the change using a new inline style. Because Expression Web will always modify existing CSS properties when the Reuse Properties button is pressed, adding a new inline style would be redundant. Therefore, Expression Web simply ignores my request to apply my change with a new inline style in this scenario.
In the second example, I'll select "div (styles.css)" in the Target Rule dropdown and then make a change to the <div> element. Because the Reuse Properties button is pressed, Expression Web will still modify the "style1" class in this scenario, but it will also modify the styles.css style sheet as well because I have specified that I want my modifications to affect the div selector in the styles.css style sheet. It's likely that other pages are also using this style sheet, and unless Expression Web modifies the div selector in the style sheet as I've asked it to do, my change won't affect those other pages.
The final item on the Style Application toolbar is the Show Overlay button. If this button is pressed, a blue border will overlay the page element that you are editing. This has no effect on the page when it is displayed in the browser. It only affects Design view in Expression Web.
Conclusion:
The Style Application toolbar is a powerful tool that makes it easy to control how Expression Web generates CSS code. The most effective way to use this toolbar is to use it as you are editing your page elements. In other words, don't use it as a "set and forget" tool. Instead, use it to control Expression Web's CSS generation as you are laying out and formatting your pages so that you have full control over how CSS is applied.
