PhpStorm 2017.3 Help

Code Style. CSS

File | Settings | Editor | Code Style | CSS for Windows and Linux
PhpStorm | Preferences | Editor | Code Style | CSS for macOS
Ctrl+Alt+S settings


Use this page to configure formatting options for CSS files. View the result in the Preview pane on the right.

Tabs and Indents

Use tab character
  • If this checkbox is selected, tab characters are used for indentation and for code reformatting.
  • When the checkbox is cleared, PhpStorm uses spaces instead of tabs.
Smart tabs An indentation consists of two parts. One part results from nesting code blocks and the other part is determined by alignment.
  • If this checkbox is selected, the part that results from nesting contains both tabs and spaces (if necessary), while the part defined by alignment consists only of spaces.
  • If this checkbox is cleared, only tabs are used. This means that after reformatting a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.
Tab sizeIn this text box, specify the number of spaces that fits in a tab.
IndentIn this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted for each indent level.
Continuation indentIn this text box, specify the number of spaces (or tabs if the Use Tab Character checkbox is selected) to be inserted between the elements of an array, in expressions, method declarations, and method calls.
Keep indents on empty linesIf this checkbox is selected, PhpStorm retains indents on empty lines as if they contained some code. If the checkbox is cleared, PhpStorm deletes the tab characters and spaces on empty lines.

Other

In this tab, specify the alignment, braces and spaces options to be applied on reformatting.

ItemDescription
Braces placementUse this drop-down list to specify where PhpStorm should place the opening braces of selectors. The available options are:
  • At the end of line
  • Next line
Align valuesUse this drop-down list to specify how PhpStorm 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 blocksIn this text box, specify the minimum number of sequential blank lines to be retained after reformatting.
Align closing brace with propertiesIf this checkbox is selected, the closing brace of the selector will be placed under the list of properties.
If this checkbox is not selected, the closing brace of the selector will be placed under the selector.
Keep single-line blocksIf this checkbox is selected, the blocks with a single property will be confined to one line.
If this checkbox is not selected, each property will be placed to its own line.
SpacesSelect the checkboxes in this area to add a space after the colon delimiting key and value, and before the opening brace of the selector.
HEX ColorsUse this area to configure the hex color syntax. You can select from the following check options:
  • Convert hex colors to - select this checkbox to configure the hex color letter case. You can choose Lower case or Upper case.
  • Convert hex colors format to - select this checkbox to configure the hex color format length. You can choose Long format or Short format.

View changes in the Preview pane.

Set from

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: 29 March 2018

See Also