Partager via

CSS Properties window, with screenshots

  • Article

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.

Comments

  • Anonymous
    January 07, 2006
    Each time I have used this tool I have ended up with VS2005 crashing and then restarting [with the usual 'can I send a report to MS' question being asked.

    In each case the tool was being used to investigate the style information associated with a master page. What other information would you like to see to help resolve this?

  • Anonymous
    January 10, 2006
    Please send repro steps directly to me and I will forward them to the developer who owns the add-in. Please use "Contact" link on top of the page. We can then communicate over e-mail which is more efficient.

    Thanks!

  • Anonymous
    March 24, 2006

     First I thought that Visual Studio doesn't have a properties window for CSS stylesheet files as had...

  • Anonymous
    July 15, 2006
    First I thought that Visual Studio doesn't have a properties window for CSS stylesheet files ashad

  • Anonymous
    June 05, 2007
    Overview Visual Studio 2005 provides some capabilities for visually editing the styles for elements...

  • Anonymous
    June 19, 2009
    PingBack from http://mydebtconsolidator.info/story.php?id=18222