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:

image

 

 

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:

image

 

 

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:

image

 

 

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

image

 

 

Capitalization

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

Lowercase (default):

image

 

 

Uppercase:

image

 

 

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