PhpStorm 8.0.0 Web Help

File | Settings | Editor | Code Style | CSS


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

Item Description
Use tab character
  • If this check box is selected, tab characters are used:
    • On pressing the TabTabTabTabTabTabTabTabTabTabTab key
    • For indentation
    • For code reformatting
  • When the check box is cleared, PhpStorm uses spaces instead of tabs.
Smart tabs
  • If this check box is selected, PhpStorm inserts tabs for indentation and reformatting, but fine alignment to a necessary column is done only via spaces without replacing them with tabs. This is done in order to preserve visual representation of the source code, when the Tab Size is changed.
  • If this check box is cleared, only tabs are used. This means that a group of spaces that fits the specified tab size is automatically replaced with a tab, which may result in breaking fine alignment.

The Smart Tabs check box is available if the Use Tab Character check box is selected.

Tab size In this text box, specify the number of spaces included in a tab.
Indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted for each indent level.
Continuation indent In this text box, specify the number of spaces (or tabs if the Use Tab Character check box is selected) to be inserted at the next line in case of a construct break.
Keep indents on empty lines If this check box is selected, then PhpStorm will keep indents on the empty lines as if they have contained some code.
If this check box is not selected, PhpStorm will delete the tabulation characters.
Detect and use existing file indents for editing Use this check box to detect code style settings in the currently edited file on the fly. In this case, when you open a file in the editor, indentation that was used in that file is preserved automatically. For example, if tabs were used for the indentation then in copy, paste or enter actions, tabs are used. Also, note that if you use the Reformat Code command then PhpStorm applies default code style settings and uses them in the editor.

Other

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

Item Description
Braces placement Use 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 values Use 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 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.

Set From

Click this link to reveal the list of languages to be used as the base for the current language code style. So doing, only the settings that are applicable to the current language are taken. All the other settings are not affected.

This link appears in the upper-right corner of the language-specific code style page, when applicable.

Click Reset to discard changes and return to the initial set of code style settings.

See Also

Procedures:

Reference:

Web Resources: