Testing Your CSS Before You Publish with Expression Web's CSS Reporting Features
Cascading Style Sheets offer a wide range of formatting and design options, but with them come almost as many chances to make mistakes. If you're worried about your CSS code, Expression Web's CSS Reporting features can help. To run a CSS Report in Expression Web:
1. Choose Tools > CSS Reports.
2. Under the Errors tab in the CSS Reports dialog, specify whether you want to check All pages, Open pages, Selected pages, or the Current page. If you choose selected pages, click to highlight the pages you want to check in the Folder List task pane. In this example, I've selected Current page to check only the page I have open in Expression Web.
Next click to check the box if you want to check for:
Unused Styles: this option produces a list of class-based, id-based, and element-based styles that are defined in a CSS and not used in your web pages.
Undefined Classes: this option lists class-based styles that are used in a web page but aren't defined in a CSS.
Mismatched Case: This option lists class-based and id-based styles that are defined with a case that is different than the case of a reference to that style. For example, if your style sheet defines a class that is named ".image-right" and a web page references ".Image-Right", this style will appear in the report.
Click Check to run the report and Expression Web will list any errors in the bottom of the page as shown in the image below.
3. Next, you can run more reports by clicking on the Usage tab.
Again, specify which pages should be checked as you did in step b above.
Under Check for, select any or all of the following:
Class Selectors: this option generates a list of all of the class-based styles that are used on a page or site, any web pages that are using those styles, and the location of the style definition.
ID Selectors: this option generates a list of ID-based styles that are used on a page or site, any web pages that are using those styles, and the location of the style definition.
Element Selectors: this option generates a list of element styles that that are used on a page or site, any web pages that are using those styles, and the location of the style definition.
Click Check to run the report and the results will be displayed at the bottom of the page as shown in the figure below.
Click on the name of any style to open the external style sheet or display the code section of the page where that style is defined. You can also use the blue arrows on the left to move through the styles, displaying each style in turn that is listed in the report.
Return to Tip 1 | Return to Expression Web main page
