The Apply Styles task pane (see Figure 18.1) is a convenient way to apply styles to elements in a page. However, it’s also a quick way to remove styles, add new styles, and modify existing styles. Styles are applied using the Apply Styles task pane by simply clicking on a style entry in the task pane.

Figure 18.1. The Apply Styles task pane makes applying styles, editing styles, and removing styles easy.

The Apply Styles task pane uses color-coding for different CSS elements and even lets you select all instances of a particular CSS element on a page.

The Manage Styles task pane (see Figure 18.2) is similar in functionality to the Apply Styles task pane.

Figure 18.2. The Manage Styles task pane is a quick way to locate CSS code for a particular style or to select a style for manipulation via the CSS Properties task pane.

The primary difference is that simply clicking on a style in the Manage Styles task pane doesn’t apply the style to the selected page element. You can apply a style by right-clicking the style and selecting Apply Style from the menu, but the Manage Styles task pane is more often used to select a style so that you can edit the CSS code or change CSS properties using the CSS Properties task pane.

The Link Style Sheet dialog (see Figure 18.3) is more than just a method of adding style sheet links to one or more pages. It also allows you to arrange the order in which style sheets are applied to a page.

Figure 18.3. Linking style sheets is accomplished using the Link Style Sheet dialog. You can adjust the order of linked style sheets as well.

The Link Style Sheet dialog also provides you with an Edit button that can be used to quickly open a selected style sheet for editing.

The CSS Properties task pane (see Figure 18.4) provides a grid view of CSS styles applied to a page or page element. The grid is context-sensitive, which means the CSS properties it displays are based on what is currently selected on the active page.

Figure 18.4. The CSS Properties task pane appears to be a simple tool at first, but it’s actually extremely powerful.

The CSS Properties task pane can display CSS properties in categories or in alphabetical order. It displays all rules that apply to the active selection and even shows you where each style is defined.

CSS reporting in Expression Web is implemented using two separate dialogs: the CSS Reports dialog shown in Figure 18.5 and the CSS Reports task pane shown in Figure 18.6.

Figure 18.5. Expression Web provides CSS reports for style usage as well as style errors. CSS report properties are configured in the CSS Reports dialog.

Figure 18.6. Results of CSS reports are displayed in the CSS Reports task pane. From here, you can easily access CSS code in your pages and CSS files.

The CSS reporting feature can be filtered using the Custom AutoFilter dialog, as shown in Figure 18.7. It’s a powerful way to examine CSS usage, unused CSS styles that need to be cleaned up, and any CSS errors in your site.

Figure 18.7. You can filter the results of CSS reports using the Custom AutoFilter dialog. Many different filter options are available.

The Style Builder (see Figure 18.8) makes it easy to build complex CSS styles quickly without knowing CSS. Styles can be saved into a page or style sheet.

Figure 18.8. The Style Builder is a powerful way to quickly create and modify CSS styles.

Styles are broken down into multiple categories and the options available in the Style Builder change according to the category chosen.

The Manage Styles task pane shows a list of styles from the current page and also from linked style sheets. As shown in Figure 18.9, each style sheet linked to the active page will have an expandable section inside the Manage Styles task pane, as will any embedded style sheets.

Figure 18.9. The Manage Styles task pane sections off each style sheet. In this case, there is one linked style sheet and one embedded style sheet.

You may notice that @layout.css appears under the style3.css style sheet in the Manage Styles task pane. The layout.css style sheet is an imported style sheet inside style3.css. By using an imported style sheet, common styles can be created once in a single style sheet and then imported into other style sheets using the @import directive.

The following code appears at the top of style3.css and imports all the styles defined in layout.css into the style3.css style sheet:

@import url("layout.css");

<h3 style="font-size: 12pt;">This is a Heading with <em>emphasis<
/em></h3>

Each style in the Manage Styles task pane is represented by a colored dot. There are four different colors to represent styles:

#sidebar {
  float: right;
  width: 380px;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
}

<div id="sidebar">

#sidebar h1 {
  font-size: 18px;
}

The Options button in the Manage Styles task pane displays the Options menu, allowing you to choose which styles appear in the list as well as how they are displayed.

The following items on the Options menu control how styles are categorized:

The following items on the Options menu control the styles that are displayed in the Manage Styles task pane:

Note

If you’ve selected elements on your page and the Manage Styles task pane style preview area is empty, see “Selected Styles Don’t Display Preview” in the “Troubleshooting” section of this chapter.

The Show Styles Used on Selection menu item is a powerful way of identifying where certain styles originate. If you select the div with an ID of content on the master.dwt page, the Manage Styles task pane will appear, as shown in Figure 18.12. This allows you to tell at a glance that the content CSS ID is defined in both the layout.css and style3.css CSS files.

Figure 18.12. Using the Manage Styles task pane, it’s simple to find out exactly where certain styles originate. In this case, the content CSS ID is defined in both layout.css and style3.css.

This capability is even more powerful when a particular element is being influenced by CSS styles that are actually applied to higher level elements or when an element is taking on CSS styles from multiple places. Suppose you have a paragraph that unexpectedly appears in a blue font and you need to track down the CSS style that is causing that to happen.

Without the Manage Styles task pane, it could be fairly difficult to locate a source of formatting because of inheritance and the cascading rules for CSS. Using the Manage Styles task pane, you can simply click inside the paragraph and immediately locate the CSS code that’s causing the blue text.

The final two items on the Options menu are Separate Grouped Selectors and Display Selected Style Preview.

By default, Expression Web will group selectors affected by a particular style. For example, in Figure 18.11 (shown previously), the #content CSS ID is followed by several HTML heading selectors. The CSS code that defines this #content ID is as follows:

#content h1,h2,h3,h4,h5,h6 {
  color: #a0522d;
}

The Separate Grouped Selectors option will break the selectors out of the group so they appear as separate items, as shown in Figure 18.13.

Figure 18.13. When the Separate Grouped Selectors menu option is checked, HTML selectors that are grouped with a particular CSS element are shown as separate items.

The Display Selected Style Preview menu item toggles the Selected Style Preview portion of the Manage Styles task pane.

The Apply Styles task pane is similar in functionality and design to the Manage Styles task pane. However, as its name indicates, it is intended primarily for applying styles to page elements.

Like the Manage Styles task pane, the Apply Styles task pane uses color-coded dots to indicate different types of styles. It also breaks out style sheets and embedded styles into collapsible sections. You can easily apply any style to a page simply by clicking on the name of the style in the Apply Styles task pane.

As you click on an area of a page, the styles applied to the area will be highlighted in the Apply Styles task pane. If the area you’ve clicked on is an HTML selector styled in a style sheet, the selector and any associated styles will appear at the bottom of the Apply Styles task pane in the Contextual Selectors section, as shown in Figure 18.14.

Figure 18.14. The Contextual Selectors section of the Apply Styles task pane displays styles that are defined using HTML selectors.

Hovering over a style in the Apply Styles task pane reveals an arrow button at the right edge of the style name. Clicking on that button displays a menu (see Figure 18.15), which provides many ways of interacting with the style.

Figure 18.15. Working with styles using the Apply Styles task pane is similar to using the Manage Styles task pane. The menu shown here is available in both task panes.

The following menu items are available when you click the arrow button next to a style:

Note

If the Remove Class, Remove ID, or Remove Inline Style menu options are not enabled, see “Cannot Remove CSS Elements” in the “Troubleshooting” section of this chapter.

The Apply Styles and Manage Styles task panes are focused on working with one or two styles. The CSS Properties task pane, on the other hand, is more of an all-in-one tool that makes it easy to manage all the styles applied to your page.

The CSS Properties pane is divided into two sections, as shown in Figure 18.16. The top section is called the Applied Rules section, and it shows all the CSS rules that apply to the selected page element. Rules are displayed in the order in which they are applied to the page.

Figure 18.16. The CSS Properties pane is among Expression Web’s most powerful CSS tools.

The bottom part of the CSS Properties pane displays the CSS style properties for the selected rule. Properties defined for the selected rule appear in bold blue text and overridden properties appear with a red line through them.

When a rule is selected in the CSS Properties pane, Expression Web will display where the rule is defined in the Applied Rules header of the CSS Properties task pane. If the rule is defined in a linked style sheet, the name of the style sheet will be displayed as a link to open the style sheet when clicked. (Note that in Figure 18.16, style1.css appears as a link that can be clicked to open the CSS file where the rule is defined.) If the link is defined in an embedded style sheet, Expression Web will display “(Current Page)” as the location where the rule is defined.

As shown in Figure 18.17, a series of four buttons appears at the top of the CSS Properties task pane:

Figure 18.17. The series of buttons at the top of the CSS Properties task pane make it easy to adjust the display.

The Summary button is one of the most powerful CSS tools available in Expression Web because it makes it easy to find out exactly what is affecting the formatting of a selected page element. In Figure 18.17, you can see that the selected element has three properties for text-decoration, but two of them have a line through them, indicating that they’ve been overridden. By hovering over these properties, you can easily determine what other property is overriding them. As you define your CSS styles, you’ll find yourself using this feature often because it makes it easy to track down CSS properties that don’t seem to be taking effect when they ought to.

Modifying CSS properties using the CSS Properties task pane couldn’t be easier. You don’t have to know CSS code and syntax to modify properties because most of the properties listed will expand to display the valid values in a dropdown list. To modify a property, simply select the new value from the list, as shown in Figure 18.18.

Figure 18.18. Changing CSS properties is accomplished using the dropdown menu of valid property assignments.

As you select properties in the task pane, the rule to which that property applies is automatically highlighted. This makes it easy to ensure that you are changing the correct property.

When you modify a style that exists in a CSS file, Expression Web will automatically open and edit the CSS file. You will then be prompted to save those changes to the CSS file when the page it is linked to is saved.

The Style Builder is a common name for the New Style and Modify Style dialog boxes. When creating a new style, the New Style dialog is displayed; when modifying an existing style, the Modify Style dialog is displayed. Both dialogs are the same, but the options available are different based on whether you are creating a new style or not.

In Figure 18.19, a new style is being created. Note that the Define in dropdown is set to Existing Style Sheet and the style3.css style sheet is selected. You can also choose to add the new style to a new style sheet or to the current page. When adding styles to the current page, they are added to an embedded style sheet.

Figure 18.19. The Style Builder is a comprehensive dialog for creating new styles or modifying existing styles without having to write CSS code.

The Selector dropdown contains a list of all the HTML selectors, but you can also enter a CSS class name or ID into the textbox portion of the dropdown to create a new CSS class or ID.

To configure a particular category of CSS property, select the category from the Category list, as shown in Figure 18.19, and then configure the style as desired. Categories for which style properties have been configured appear in bold text. After you’ve completed configuring a style, click OK to add it or apply your modifications. If the Apply New Style to Document Selection checkbox is checked when creating a new style, the style will automatically be applied to the selected element in the page. Otherwise, the style will simply be added to the style sheet as specified.

Styles sheets can easily be added to the current page or to all pages using the Attach Style Sheet and Link Style Sheet dialogs. To access the Attach Style Sheet dialog, select Format, CSS Styles, Attach Style Sheet. To access the Link Style Sheet dialog, select Format, CSS Styles, Manage Style Sheet Links.

The Attach Style Sheet dialog (shown in Figure 18.20) is used to either attach a style sheet link to one or more pages or to import styles from a style sheet into one or more pages.

Figure 18.20. CSS style sheets are attached or imported using the Attach Style Sheet dialog. You can add style sheets to the current page, pages selected in the Folder List, or to all pages.

Imported styles are added to a page using the CSS @import directive. For example, if a style sheet located at styles/style1.css is imported via the Attach Style Sheet dialog, the following CSS code is added to the page:

<style type="text/css">
  @import url('styles/style1.css'),
</style>

The Link Style Sheet dialog (shown in Figure 18.21) is specifically designed to be used with linked external style sheets. Not only can you add and remove style sheet links using this dialog, but you can also arrange the order of style sheets.

Figure 18.21. The Link Style Sheet dialog provides a clean interface for linking style sheets and arranging their order.

The CSS tools in Expression Web comprise a powerful CSS feature set that has not been seen in any previous Microsoft Web development platform. Not only is it easy to create styles and modify existing styles, but it’s also extremely simple to investigate the source of formatting on a page using the CSS Properties task pane. By using these tools together, you can take control of CSS in your Web site.

The Errors tab (shown in Figure 18.22) allows you to easily locate the following types of errors in your CSS code:

After choosing the errors you would like to check for, click the Check button to run the report. Results are displayed in the CSS Reports task pane, as shown in Figure 18.23.

Figure 18.23. The CSS Reports task pane displays CSS report results, making it easy to locate and correct errors.

To locate an error displayed in the CSS Reports task pane, double-click the error or right-click the error and select Go to Page, as shown in Figure 18.24. Expression Web will open the page containing the error and the offending code will be highlighted so you can easily correct it without having to dig through the code.

Figure 18.24. Locating a CSS error is easily accomplished by double-clicking the error or by using the right-click menu.

As with other task panes, the CSS Reports task pane can be sorted by clicking on a column header. It can also be filtered by clicking the small black arrow at the right edge of a column and selecting Custom to display the Custom AutoFilter dialog, as shown in Figure 18.25.

Figure 18.25. The CSS Reports task pane can be filtered using the Custom AutoFilter dialog. In this case, CSS files are filtered out of the report.

The Usage tab in the CSS Reports dialog (shown in Figure 18.26) allows you to run a report that shows how CSS is used in a page. The following options are available:

Figure 18.26. The Usage tab allows you to run reports that detail how CSS is being used in your Web site.

I don’t see any styles in the Manage Styles or Apply Styles task pane. Is this a bug?

No, it’s not a bug. To see styles in the task panes, you must have styles applied to the page that is currently active in Expression Web. You should link a style sheet, import a style sheet, or define some styles directly in the page first. You will then be able to manage those styles using the CSS task panes in Expression Web.

I’ve selected a page element I know has a style applied to it, but I don’t see the preview of the selected style in the task pane.

Make sure you have selected the page element in Design View. If you select a page element in Code View, the style preview will not work.

When I right-click on a style in the Apply Styles task pane, the Remove Class, Remove ID, and Remove Inline Style options are all disabled and I can’t remove the style.

Before you can remove a CSS class, ID, or inline style, you must select the page element from which you want the style removed. Removing a style doesn’t really remove the style from the style sheet where it exists. It simply removes the application of that style from any selected page elements.

First, select one or more instances of the style on the page and you will then be able to remove the style from those instances.