Change CSS Formatting

Tips Search

Change CSS Formatting

  • Comments 5

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.

  • This saves me a lot of backspacing and deleting white spaces :)

  • I got to the CSS menu but there is no Formatting in Visual Studio 2010

  • Luqman,

    Did you go to Tools -> Options first?

    Z

  • What if I don't want a space after the colon?  When using single line css, it's much easier to read if the only space is after semi-colons.  Please add this option.

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

Page 1 of 1 (5 items)
Leave a Comment
  • Please add 1 and 8 and type the answer here:
  • Post