PhpStorm 2018.3 Help

Style Sheets

With PhpStorm, you can use most common Style selectors: universal selector *, type selectors .a, descendant selectors .a.b, child selectors .a .b, ID selectors #b, pseudo-classes and class selectors DIV.warning.

Because PhpStorm integrates with various tools that compile code into CSS, you can also write your style definitions in Sass, Less, SCSS, or Stylus.

Working with style declarations

PhpStorm lets you create new rulesets from existing declarations and even move entire rulsets other files using CSS-aware intention actions and refactoring.

To extract a ruleset

  1. Select the declarations to extract. If you need only one declaration, just place the cursor inside it.

  2. Press Alt+Enter and select Extract ruleset from the list.

PhpStorm creates a new ruleset with the same selector and moves the selected declarations to it. If the selection contains comments, nested selectors, etc. they are also moved to the new ruleset.

To move a ruleset to another file

  1. Place the cursor anywhere in the ruleset and press F6.

  2. In the dialog that opens, specify the file to move the ruleset to. If the specified file does not exist, PhpStorm will suggest creating it.

  3. By default, PhpStorm automatically opens the file where the ruleset is moved. To change this behavior, clear the Open in editor checkbox.

Completing CSS classes

PhpStorm first suggests classes and ids from the style tag and linked files. But if no matching results are found, PhpStorm also suggests symbols defined in all stylesheet files in the project.

Project-wide completion for CSS symbols in HTML
To see all classes and ids defined in the project straight away, before you start typing, press Ctrl+Space twice.

Changing Color Values in Style Sheets

With PhpStorm, you can easily change color values in Style Sheets without typing hexadecimal codes codes.

To choose a color

  1. Open the desired Style Sheet for editing.

  2. Type color:, and then press Ctrl+Space.

  3. Select the desired color value from the suggestion list or choose color... to pick a custom one:

    Choosing a color

To change a color

  1. Open the desired Style Sheet for editing, and locate the color property that you want to change.

  2. Click the color icon in the gutter.

    Alternatively, if the icons are not shown, press Alt+Enter and select Change color from the list.

    Changing a color using an intention action

  3. In the Choose color dialog that opens, pick the desired new color and click Choose.

    Picking a color

To preview the code of a color

  • PhpStorm marks each color property with a gutter icon of the corresponding color. When you hover over a color icon, PhpStorm displays a popup that shows the color preview and its hexadecimal code.

    Color preview on hovering over a color icon in the gutter

    To use a code instead of a human-readable color name, press Alt+Enter and select Convert color to <color code system> from the list, where <color code system> is HEX, HSL, HWB, or RGB

To show color icons in the gutter

By default, PhpStorm displays color icons in the gutter. If they are for some reason hidden, you can return them at any time.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | General | Gutter Icons. The Gutter Icons page opens.

  2. In the Common area, select the Color preview checkbox.

Formatting Style Sheets

Every time PhpStorm generates, refactors, or reformats your Style Sheet code, it automatically applies the language-specific code style settings.

Alternatively, you can use the Prettier formatter.

To format a Style Sheet with Prettier

  • Select the code fragment to reformat in the editor or select a file or a folder in the Project tool window and press N/A.

Viewing the Styles Applied to a Tag

For HTML, XHTML files, PhpStorm suggests a way to explore all styles applied to an arbitrary tag.

The results for each tag are displayed in the dedicated tabs of the CSS Styles tool window. Using this tool window, you can view the list of styles applied to a tag, and the definition of these styles. Besides that, you can navigate from style to the corresponding tag in the source code.

  1. Open the desired file in the editor, and right-click the tag you want to explore for applied styles.

  2. From the context menu, choose Show Applied Styles for Tag.

  3. View results in a dedicated tab in the CSS Styles tool window:

    Viewing the styles applied to the tag <body>

Last modified: 7 December 2018