Generate CSS Reports in Microsoft Expression Web 2

Microsoft Expression Web has this interesting feature of generating CSS Usage and Error reports that list the types of styles in use, styles that are defined but not used, or list of style errors. You can generate such reports for individual web pages, entire web site or for specific styles. Let us see how to do that.

To generate reports:

1.       Begin by choosing the scope of reports by doing any one of the following:

·         To report the entire site, open the web site in Expression Web.

·         To report particular web page/pages, select one or multiple pages in the Folder list by holding down CTRL and clicking on them.

·         To report one or more styles, choose them in the Apply or Manage Styles task pane.

2.       Go to the Tools menu > CSS Reports.

3.       This would launch the CSS Reports dialog box as shown below:

4.       The default selected tab is the Errors tab. Check the right options to generate a report for CSS errors.

5.       Switch to the Usage tab and check the right options to generate CSS usage report.

6.       The Check Options: ‘Check Where’ – lets you choose which pages/style the report should check and ‘Check for’ options let you decide what you want to check in those pages/styles. On Errors tab you have following options:

·         Unused Styles – List all the class, ID and element selectors that are defined in a CSS but are not used in your web page or web site.

·         Undefined Classes – List all the class selectors that are reference but not defined in a CSS.

·         Mismatched Case – List all the class selectors that are defined in a case that is different than the case that is used to reference that style.

On Usage tab you have these options:

·         Class Selectors – List the class selectors, web pages that are using them and their location in the CSS style definition. 

·         ID Selectors – List the ID selectors, web pages that are using them and their location in the CSS style definition. 

·         Element Selectors – List the class selectors, web pages that are using them and their location in the CSS style definition. 

7.       Choose the right options and click on Check. The report is generated in CSS Reports task pane, visible at the bottom of your workspace.