Running CSS Reports

Use the Expression Web CSS reports to find out more about your Web site's styles. In this section, we tell you about the three main types of CSS reports you can run in Expression Web and what they tell you about your styles.

CSS Errors report

The CSS Errors report finds mistakes in your Web site's CSS. It checks for these boo-boos:

• Unused styles: Any element-, class-, or ID-based style rules that aren't applied to any page elements. Honestly, nothing is wrong with having a few unused styles in your CSS. In fact, if you're using a style sheet that someone else created, that person may have included styles that you haven't used but may find a use for later. But if you have a lot of obsolete styles cluttering your style sheet, you may want to remove them, just to keep your CSS lean and tidy.

• Undefined classes: Classes that are assigned to page elements but have no style rules that target them. Although your Web site's CSS doesn't break if you have a few wayward classes loitering around, you should remove any you don't need, to keep your page's code to a minimum.

• Mismatched case: Class-and ID-based styles where the style rule selector uses a different case than the class or id attribute value. For example, if you have a class attribute in a page element whose value is SmallText and the style rule's selector is .smalltext, the style rule shows up in the CSS Errors report. This type of error is one that you need to fix. Style rules are case sensitive, and the selector must match the value exactly. Keep all your class and id values lowercase, and you won't run into this problem.

Tip 

Always use lowercase letters for your class and id values, and you will never run into a mismatched case!

To run a CSS Errors report, follow these steps:

1. Open the Web site for which you want to run the CSS Errors report, and decide whether you want the report to check all pages or only certain pages.

   Your choices are all pages, open pages, selected pages, and the current page.

   To run the report for open pages, in the editing window, open the pages you want the report to check.

   To run the report for selected pages, in the Folder List task pane, hold down the Ctrl key and click the page icon for each page you want the report to check.

   To run the report on the open page only, make sure that it's the active page.

   To run the report for all pages, go to Step 2. You set this option in the dialog box.

2. Choose Tools CSS Reports.

   The CSS Reports dialog box appears, with the Errors tab open, as shown in Figure 9-9.

   
   Figure 9-9: The Errors tab.

3. In the Check Where area, choose the option for which pages you want the report to check.

   The Selected Pages option is available only if you selected pages in the Folder List task pane before you opened the CSS Reports dialog box (refer to Step 1).

4. In the Check For area, select the type of errors you want the report to check your pages for.

5. Click the Check button to run the report.

   The CSS Reports task pane appears at the bottom of the editing window, listing any errors it found, as shown in Figure 9-10.

   
   Figure 9-10: The CSS Errors report.

6. Make use of the reporting tools to find and fix these errors:

   • To go to the CSS error in your Web page, double-click the error listing.

   • To run the report again, click the CSS Reports button in the upper-left corner of the task pane. This action opens the CSS Reports dialog box.

   • Click the Next and Previous buttons to scroll through the pages containing the errors. Expression Web highlights each error for you.

   • Click the Style Sheet Links button to show the Style Sheet Links report in the upper part of the editing window. (We talk about this report later in this chapter.)

TECHNICAL STUFF 

You can specify filter criteria on the CSS report by clicking the down-arrow button in one of the report columns and choosing a filter criteria from the drop-down list that appears. Refer to Microsoft Expression Web Help for instructions on how to filter reports.

CSS Usage report

Want to take a look at a list of the style rules that are being used? Run the CSS Usage report for all pages in your Web site, or select one or more pages. You can limit the report to a particular type of style rule (element-, class-, or ID- based style rules) or list all types.

To run a CSS Usage report, follow these steps:

1. Open the Web site for which you want to run the CSS Usage report, and decide whether you want the report to check all pages or only certain pages.

   Your choices are all page, open pages, selected pages, and current page.

   To run the report for open pages, in the editing window, open the pages you want the report to check.

   To run the report for selected pages, in the Folder List task pane, hold down the Ctrl key and click the page icon for each page you want the report to check.

   To run the report on only the open page, make sure that it's the active page.

   To run the report for all pages, go to Step 2. You set this option in the dialog box.

2. Choose Tools CSS Reports.

   The CSS Reports dialog box appears, with the Errors tab open.

3. Click the Usage tab.

4. In the Check Where area, choose the option for which pages you want the report to check.

   The Selected Pages option is available only if you selected pages in the Folder List task pane before you opened the CSS Reports dialog box (refer to Step 1).

5. In the Check For area, select the type of style rules you want the report to check your pages for.

6. Click the Check button to run the report.

   The CSS Reports task pane appears at the bottom of the editing window, listing the styles of the type you selected, as shown in Figure 9-11.

   
   Figure 9-11: The CSS Usage report.

   For each style, the report lists these items:

   • The page on which it's used (in the Usage Location column)

   • The Code view line number

   • The style sheet filename, for external style rules, or Web page, for internal style rules (in the Definition Location column)

7. Make use of the reporting tools to review the styles:

   • To go to the CSS style in your Web page, double-click the style rule listing.

   • Click the Next and Previous buttons to scroll through the Web pages containing the styles. Expression Web highlights each HTML element that the style targets.

   • To view the style in the style sheet, click the style sheet or page link in the Definition Location column.

   • To run the report again, click the CSS Reports button in the upper-left corner of the task pane. This action opens the CSS Reports dialog box.

   • Click the Style Sheet Links button to show the Style Sheet Links report in the upper part of the editing window. (We talk about this report later in this chapter.)

TECHNICAL STUFF 

You can specify filter criteria on the CSS report by clicking the down-arrow button in one of the report columns and choosing a filter criteria from the drop-down list that appears. Refer to Microsoft Expression Web Help for instructions on how to filter reports.

Style Sheet Links report

The Style Sheet Links report shows you all the pages in your Web site that link to or import external style sheets. Use this report if you changed the style sheet that is attached to some of your pages and you want a quick look to make sure all the style sheet links are working properly.

To run the Style Sheet Links report, choose Site Reports Shared Content Style Sheet Links. The Style Sheet Links report appears on the Web Site tab in the editing window, as shown in Figure 9-12.

Figure 9-12: The Style Sheet Links report.

If you have a CSS report open in the editing window, you can also run this report by clicking the Style Sheet Links button.