CSS Properties window, with screenshots

Where is the command to show the CSS Properties window? Look in the View menu:

 

I usually dock CSS Properties window with the Solution Explorer so I can see both Properties and CSS Properties windows. With the CSS Properties window you can inspect how cascading styles are applied to the selected element from inline styles, style blocks and from the linked stylesheet. You can edit inline styles and styles defined in the linked stylesheet. Editing styles defined in style blocks is not supported. If multiple stylesheets are attached, all styles are shown, but new styles are always created in the last referenced stylesheet.

Examples:

#input1
{
  background-color: Blue;
}
#TextBox1
{
  background-color: Red;
}
.textbox
{
  border-top-style: dotted;
}
input
{
  font-family: Times New Roman;
}

 

Adding a new style rule to an inline style. You can see that intellisense is available.

 

Editing value of an existing style rule. Intellisense is available for values as well. You can use either drag-drop or standard cut/copy/paste keyboard shortcuts (Ctrl+X, Ctrl+C and Ctrl+V respectively) to move style rules between stylesheet and inline styles or between elements.

Note that intellisense comes from Internet Explorer 6 CSS schema. The reason is that the designer is based on Internet Explorer engine and hence does not support all CSS 2 rules. Technically it is possible to use another schema, but then some styles can disappear after application since designer does not understand them and won't persist the change. Therefore, if you want strict, standards-based style rules, we recommend that after editing the page you switch to the Source view and verify that Error list does not display any validation errors. Then open the linked stylesheet and verify that it does not contain any validation errors either.

You can select multiple elements and edit their styles together. When multiple elements are selected, the CSS Properties window displays an intersection of the style settings for those elements — that is, it displays style settings only if they are the same for all selected elements. Any changes you make are made to the style settings for all selected elements.

Thanks Ben for coming up with the idea and coding up most of the functionality largely in his spare time, Barry for finishing coding, debugging, and following up through all our release processes, Scott and Alex for testing, Mike for writing the documentation and Scott and Bash (our dev manager) for supporting the entire endeavour.

Link to download.