Change CSS Formatting

Menu:  Tools -> Options -> Text Editor -> CSS -> Formatting
Versions:  2008,2010
Published:  12/26/2010
Code:  vstipEdit0094

 

People are very picky about how their code is styled.  Fortunately, Visual Studio comes with the ability to format your CSS code the way you like it.  Just go to Tools -> Options -> Text Editor -> CSS -> Formatting:

 

 

Style

There are basically three style options you can have here:

Expanded - (default) gives the most readability by adding extra space in the styles.  The selector and initial brace each appear on their own lines, declarations are indented on subsequent lines, and the closing brace is aligned with the matching opening brace:

 

 

Semi-expanded - provides a trade-off between readability and compactness by reducing space.  The selector and initial brace ({) are positioned on the same line, declarations are indented on subsequent lines, and the closing brace (}) is aligned with the matching opening brace:

 

 

Compact - maximum amount of reduced space.  The selector and declaration are positioned on the same line:

 

 

Capitalization

This is pretty straightforward and provides casing instructions for the properties:

Lowercase (default):

 

 

Uppercase:

 

 

As entered - leaves the casing alone and doesn't modify the user input.

Comments

• Anonymous
  January 06, 2011
  This saves me a lot of backspacing and deleting white spaces :)

• Anonymous
  November 07, 2012
  I got to the CSS menu but there is no Formatting in Visual Studio 2010

• Anonymous
  November 08, 2012
  Luqman, Did you go to Tools -> Options first? Z

• Anonymous
  January 21, 2014
  The comment has been removed

• Anonymous
  January 31, 2014
  How about more options or a "none of the above?" All three of the ones offered mess up my .less files.

• Anonymous
  October 07, 2015
  Using vs 2015, "formatting" is missing