Code Style. CSS
for Windows and Linux
Use this page to configure formatting options for CSS files. View the result in the Preview pane on the right.
On this page:
Tabs and Indents
In this tab, specify the alignment, braces and spaces options to be applied on reformatting.
|Braces placement||Use this drop-down list to specify where WebStorm should place the opening braces of selectors. The available options are: |
- At the end of line
- Next line
|Align values||Use this drop-down list to specify how WebStorm should align attributes and values. The available options are: |
- Do not align: select this option to specify alignment on the first character of an attribute name.
- On value: select this option to specify alignment on the first character of the value of an attribute.
- On colon
|Blank lines between blocks||In this text box, specify the minimum number of sequential blank lines to be retained after reformatting.|
|Align closing brace with properties||If this check box is selected, the closing brace of the selector will be placed under the list of properties.|
If this check box is not selected, the closing brace of the selector will be placed under the selector.
|Keep single-line blocks||If this check box is selected, the blocks with a single property will be confined to one line.|
If this check box is not selected, each property will be placed to its own line.
|Spaces||Select the check boxes in this area to add a space after the colon delimiting key and value, and before the opening brace of the selector. |
| HEX Colors||Use this area to configure the hex color syntax. You can select from the following check options: |
- Convert hex colors to - select this check box to configure the hex color letter case. You can choose Lower case or Upper case.
- Convert hex colors format to - select this check box to configure the hex color format length. You can choose Long format or Short format.
View changes in the Preview pane.
The link appears in the upper-right corner of the page, when applicable. Click this link and choose the language to be used as the base for the current language code style.
To return to the initial set of code style settings and discard the changes, click Reset.
Last modified: 10 August 2017