PhpStorm 2019.1 Help

Style Sheets

With PhpStorm, you can write style definitions both in CSS and in various languages that compile into it, such as, Sass, Less, SCSS, or Stylus.

PhpStorm recognizes and processes 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.

PhpStorm provides code completion for selectors, properties and their values and navigation from the use of a selector in HTML or JavaScript to its definition in a style sheet file. You can also use code completion and navigation to the definition for variables and mixins.

With PhpStorm, you can create and move rule-sets, extract variables, look up documentation for style sheets, configure their appearance, and more.

Documentation look-up

For properties and pseudo-elements, PhpStorm can show you a summary from the corresponding MDN article. This summary is displayed in the Documentation popup which shows a brief description of the property and its values, as well as information about its compatibility with various browsers.

To view documentation for a property at caret

  • Press Ctrl+Q or select View | Quick Documentation Lookup from the main menu. PhpStorm opens a Documentation popup with a brief description of the property.

    • If the property is available in all versions of browsers, PhpStorm does not show any information about its compatibility.

      Style sheets quick documentation: property is available in all versions of browsers
    • Otherwise, the Documentation popup also lists the browsers and their versions that support the property.

      Style sheets quick documentation: compatible browsers are listed

To open the MDN documentation in the browser

  • In the Documentation popup (Ctrl+Q), click the link at the bottom.

  • Press Shift+F1 or select View | External Documentation from the main menu.

Checking compatibility with browsers

Besides looking up in the documentation popup, you can check style sheet properties for compatibility with specific browsers on the fly. This inspection is based on the MDN Browser Compatibility Data and shows you a warning every time a property is not supported in one of the targeted browsers.

Style sheet compatibility inspection popup
  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Inspections.

  2. Expand the CSS node and select the Browser compatibility for properties. In the Options area, select the browsers you want to target and the minimum versions for them.

    CSS compatibility inspection settings

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.

Working with rule-sets

PhpStorm lets you create new rule-sets from existing declarations in CSS, SCSS, Sass, or Less files and even move entire rule-sets between files using intention actions and refactoring.

To extract a rule-set

  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 rule-set from the list.

PhpStorm creates a new rule-set with the same selector and moves the selected declarations to it. If the selection contains comments, nested selectors, and so on, they are also moved to the new rule-set.

To move a rule-set to another file

  1. Place the cursor anywhere in the rule-set and press F6.

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

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

Completing style sheet classes

Inside body tags in HTML files, PhpStorm provides completion for CSS, SCSS, Less, and Sass symbols. Completion is suggested for classes and ids defined inside style tags in the current HTML file as well as for symbols from other style sheet files.

PhpStorm first suggests classes and ids from the style tag and files linked with link tags. If no matching results are found, PhpStorm also suggests symbols defined in all stylesheet files in the project. To see all classes and ids defined in the project straight away, before you start typing, press Ctrl+Space twice.

Project-wide completion for style sheet symbols in HTML

Refactoring in style sheets

With PhpStorm, you can convert expressions in style sheets into variables and introduce these variables using the var(--var-name) syntax in .css files or the $ syntax in .scss and .sass files.

To extract a variable

  1. In the editor, place the cursor at the expression to convert into a variable and press Ctrl+Alt+V or select Refactor | Extract | Variable from the context menu or from the main menu.

  2. If more than one occurrence of the selected expression is found, select Replace this occurrence only or Replace all occurrences from the Multiple occurrences found list.

  3. For .scss, and .sass, select the global or local scope for the variable.

  4. In the field with red borders, accept the suggested variable name or specify a custom name. Press Enter when ready.

Common refactorings, such as Copy, Move, or Rename, are also available.

Changing Color Values in Style Sheets

With PhpStorm, you can easily change color values in Style Sheets without typing hexadecimal 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.

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.

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

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.

    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.

Viewing the Styles Applied to a Tag

For HTML and 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.

  • Select Show Applied Styles for Tag from the context menu of the tag you want to explore for applied styles. PhpStorm shows the results in the CSS Styles tool window.

    Viewing the styles applied to the tag <body>

Configuring syntax highlighting

You can configure CSS-aware syntax highlighting according to your preferences and habits.

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | Color Scheme | CSS.

  2. Select the color scheme, accept the highlighting settings inherited from defaults or customize them as described in Configuring Colors and Fonts.

Last modified: 16 April 2019