# CSS

## Before you start

Make sure the  CSS plugin is enabled in the settings.  Press `Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS)) to open settings and then select `Plugins`.  Click the Installed tab. In the search field, type CSS. For more information about plugins, refer to [Managing plugins](managing-plugins.html).

## Code completion

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/css_intro_completion.mp4)

The availability of code completion features varies based on your subscription type.

Community:

IntelliJ IDEA provides code completion for properties, their values, selectors, variables, and mixins.

Completion for CSS classes and ids is available in HTML files,

Ultimate:

IntelliJ IDEA provides code completion for properties, their values, selectors, variables, and mixins.

Completion for CSS classes and ids is available in HTML files, in various types of templates (for example, in Angular or Vue.js), as well as in JSX code.

### Complete CSS class names in HTML tags

In HTML files, IntelliJ IDEA first suggests classes and ids from the `style` tag and files linked with `link` tags. If no matching results are found, IntelliJ IDEA also suggests symbols defined in all stylesheet files in the project.

From style block:

![Completion for a class defined within a style block](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_style_sheets_completion_search_scope_style_block.png)

From linked files:

![Completion for a class defined in a linked CSS file](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_style_sheets_completion_search_scope_linked_css_file.png)

From 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` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)) twice.

![Project-wide completion for Style Sheet symbols in HTML](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_html_completion_for_css.png)

### Complete CSS class names in template files

![Complete CSS class names in template files](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_complete_class_in_template.png)

### Complete CSS class names in JSX code

![Completion for CSS class names](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_react_classname.png)

### Complete CSS class names from external libraries

With IntelliJ IDEA, you can also get completion for class names from [Twitter Bootstrap](https://getbootstrap.com/) or other CSS libraries that are linked from a CDN in an HTML file without adding these libraries to your project dependencies.

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_enable_completion_for_external_libs.mp4)

Procedure:

1. Open the HTML file with a CDN link to an external CSS library. IntelliJ IDEA highlights the link.

2. To enable completion for the library, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) on the link and select `Download library` from the list. Alternatively, hover over the link and click Download library.

The library is added to the list of JavaScript libraries on the `Settings | Languages and Frameworks | JavaScript | Libraries` page. For more information, refer to [Configuring a library added via a CDN
link](configuring-javascript-libraries.html#ws_js_external_library_downloaded_from_CDN).

## Search and navigation

[Video](https://resources.jetbrains.com.cn/help/img/idea/2026.2/css_go_to_definition.mp4)

Procedure:

* To find usages of a Style Sheet symbol, place the caret at it and press `Alt+F7` (Windows), `⌥ F7` (macOS), `⌥ F7` (IntelliJ IDEA Classic (macOS)), `⌃ U` (macOS System Shortcuts), `Alt+F7` (XWin), `Alt+Shift+7` (GNOME), `Alt+Shift+7` (KDE), `Alt+F7` (Emacs), `Alt+F7` (Sublime Text), `⌥ F7` (Sublime Text (macOS)), `Alt+F7` (NetBeans), `Shift+F12` (Visual Studio), `⇧ F12` (Visual Studio (macOS)), `Ctrl+G` (Eclipse), `⌘ ⇧ G` (Eclipse (macOS)). Learn more from  [Search for usages in a project](find-highlight-usages.html#find-usages).

* To jump from a usage of a Style Sheet symbol to its definition, press `Ctrl+B` (Windows), `⌘ B` (macOS), `⌘ B` (IntelliJ IDEA Classic (macOS)), `⌘ B` (macOS System Shortcuts), `Ctrl+B` (XWin), `Ctrl+B` (GNOME), `Ctrl+B` (KDE), `Ctrl+Alt+G` (Emacs), `F12` (Sublime Text), `F12` (Sublime Text (macOS)), `Ctrl+B` (NetBeans), `F12` (Visual Studio), `F12` (Visual Studio (macOS)), `F3` (Eclipse), `F3` (Eclipse (macOS)). Navigation to definition is available for classes, ids, selectors – including nested selectors and selectors with an ampersand `&` - as well as for variables and mixins.

Learn more from [Go to declaration](navigating-through-the-source-code.html#go_to_declaration).

## Documentation look-up

For properties and pseudo-elements, IntelliJ IDEA can show you a summary from the corresponding [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS). This summary is displayed in the Documentation popup which shows a brief description of the property and its values, as well as its [Web platform Baseline status](https://web.dev/baseline).

Widely available:

![Style sheets quick documentation: Baseline, widely available](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_quick_doc_compatibility.png)

Newly available:

![Style sheets quick documentation: Baseline, newly available](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_quick_doc_compatibility_newly_available.png)

Limited availability:

![Style sheets quick documentation: Baseline, limited availability](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_quick_doc_compatibility_limited.png)

For selectors, IntelliJ IDEA also shows their [specificity](https://www.w3.org/TR/selectors-3/#specificity).

![Documentation look-up: specificity fpr selectors](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_quick_doc_specificity.png)

Procedure: View documentation for a property

* Position the caret at the property and press `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)) or select `View | Quick Documentation Lookup` from the main menu.

* When you hover over a property, IntelliJ IDEA immediately displays the reference for it in the  Documentation popup.

You can turn off this behavior or configure the popup to appear faster or slower, refer to [Configuring the
behavior of Documentation popup](#ws_documentation_lookup_configure_popup) below.

Procedure: Configure the behavior of the Documentation popup

* To turn off showing documentation automatically when you hover over code symbols,                     Click ![the Show Options Menu icon](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.more.svg) in the popup and disable the Show on Mouse Move option.

* To have the Documentation popup shown faster or slower,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | General | Code Completion | Popup`, then select the Show the documentation popup checkbox, and specify the delay time.

Procedure: Open the MDN documentation in the browser

* In the Documentation popup `Ctrl+Q` (Windows), `F1` (macOS), `⌃ J` (IntelliJ IDEA Classic (macOS)), `⌘ I` (macOS System Shortcuts), `Ctrl+Q` (XWin), `Ctrl+Q` (GNOME), `Ctrl+Q` (KDE), `Ctrl+Q` (Emacs), `Ctrl+Q` (Sublime Text), `Ctrl+Q` (Sublime Text (macOS)), `Ctrl+Q` (NetBeans), `Ctrl+K, I` (Visual Studio), `⌘ K, I` (Visual Studio (macOS)), `Alt+Middle-Click` (Eclipse), `⌥ Middle-Click` (Eclipse (macOS)), click the link at the bottom.

* Press `Shift+F1` (Windows), `⇧ F1` (macOS), `⇧ F1` (IntelliJ IDEA Classic (macOS)), `⇧ F1` (macOS System Shortcuts), `Shift+F1` (XWin), `Shift+F1` (GNOME), `Shift+F1` (KDE), `Shift+F1` (Emacs), `Shift+F1` (Sublime Text), `⇧ F1` (Sublime Text (macOS)), `Shift+F1` (NetBeans), `Shift+F1` (Visual Studio), `⇧ F1` (Visual Studio (macOS)), `Shift+F2` (Eclipse), `⇧ F2` (Eclipse (macOS)) or select `View | External Documentation` from the main menu.

## Formatting

With the IntelliJ IDEA built-in formatter, you can reformat fragments of Style Sheet code as well as entire files and folders to meet the language-specific code style requirements. The formatter also wakes up automatically when you generate or refactor your code.

Procedure:

* To configure formatting for a Style Sheet language,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Code Style | Style Sheets | <your Style Sheet language>`, and configure the language-specific settings for tabs and indents, spaces, wrapping and braces, hard and soft margins, and so on.

As you change the settings, the Preview area shows how the changes affect formatting.

* In the CSS, SCSS, and Less context, IntelliJ IDEA by default uses double quotes for generated string literals in `import` statements and URLs.  To use single quotes, open the Other tab, and select Single from the Quote marks list.

To apply the chosen style to the entire file after reformatting, select the Enforce on format checkbox below the list.

> **Note:**
> Currently changing the configuration for quotation marks does not affect injected style sheets and CSS code inside the `<style>` tags.

* To reformat a code fragment, select it in the editor and press `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)).

* To reformat a file or a folder, select it in the   Project tool window  (`Alt+1` (Windows), `⌘ 1` (macOS), `⌘ 1` (IntelliJ IDEA Classic (macOS)), `⌘ 1` (macOS System Shortcuts), `Alt+1` (XWin), `Alt+1` (GNOME), `Alt+1` (KDE), `Alt+1` (Emacs), `Alt+1` (Sublime Text), `⌘ 1` (Sublime Text (macOS)), `Ctrl+1` (NetBeans), `Ctrl+Alt+L` (Visual Studio), `⌘ ⌥ L` (Visual Studio (macOS)), `Alt+1` (Eclipse), `Alt+1` (Eclipse (macOS)))  and press `Ctrl+Alt+L` (Windows), `⌘ ⌥ L` (macOS), `⌘ ⌥ L` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ L` (macOS System Shortcuts), `Ctrl+Alt+L` (XWin), `Ctrl+Alt+L` (GNOME), `Alt+Shift+L` (KDE), `Ctrl+Alt+L` (Emacs), `Ctrl+Alt+L` (Sublime Text), `⌘ ⌥ L` (Sublime Text (macOS)), `Alt+Shift+F` (NetBeans), `Ctrl+Alt+Enter` (Visual Studio), `⌘ ⌥ ⏎` (Visual Studio (macOS)), `Ctrl+Alt+L` (Eclipse), `⌘ ⇧ F` (Eclipse (macOS)). See [Reformat and
rearrange code](reformat-and-rearrange-code.html) for more details.

* Alternatively, you can use [Prettier](prettier.html) (`Ctrl+Alt+Shift+P` (Windows), `⌘ ⌥ ⇧ P` (macOS), `⌘ ⌥ ⇧ P` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ ⇧ P` (macOS System Shortcuts), `Ctrl+Alt+Shift+P` (XWin), `Ctrl+Alt+Shift+P` (GNOME), `Ctrl+Alt+Shift+P` (KDE), `Ctrl+Alt+Shift+P` (Emacs), `Ctrl+Alt+Shift+P` (Sublime Text), `⌘ ⌥ ⇧ P` (Sublime Text (macOS)), `Ctrl+Alt+Shift+P` (NetBeans), `Ctrl+Alt+Shift+P` (Visual Studio), `⌘ ⌥ ⇧ P` (Visual Studio (macOS)), `Ctrl+Alt+Shift+P` (Eclipse), `⌘ ⌥ ⇧ P` (Eclipse (macOS))).

## Refactoring

With IntelliJ IDEA, 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.

![Style sheets: introducing a variable](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_extract_variable.animated.gif)

Procedure: Introduce variables

1. In the editor, place the caret at the expression to convert into a variable and press `Ctrl+Alt+V` (Windows), `⌘ ⌥ V` (macOS), `⌘ ⌥ V` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ V` (macOS System Shortcuts), `Ctrl+Alt+V` (XWin), `Ctrl+Alt+V` (GNOME), `Alt+Shift+V` (KDE), `Ctrl+Alt+V` (Emacs), `Ctrl+Alt+V` (Sublime Text), `Ctrl+Alt+V` (Sublime Text (macOS)), `Alt+Shift+V` (NetBeans), `Ctrl+R, V` (Visual Studio), `⌘ R, V` (Visual Studio (macOS)), `Alt+Shift+L` (Eclipse), `⌘ ⌥ L` (Eclipse (macOS)) or select `Refactor | Introduce | Introduce 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` (Windows), `⏎` (macOS), `⏎` (IntelliJ IDEA Classic (macOS)), `⏎` (macOS System Shortcuts), `Enter` (XWin), `Enter` (GNOME), `Enter` (KDE), `Enter` (Emacs), `Enter` (Sublime Text), `⏎` (Sublime Text (macOS)), `Enter` (NetBeans), `Enter` (Visual Studio), `⏎` (Visual Studio (macOS)), `Enter` (Eclipse), `⏎` (Eclipse (macOS)) when ready.

With IntelliJ IDEA, you can create new rulesets from existing declarations in CSS, SCSS, Sass, or Less files and even move entire rulesets between files using refactoring and intention actions.

Procedure: Introduce rulesets

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

2. Press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Introduce ruleset from the list.

IntelliJ IDEA creates a new ruleset 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 ruleset.

Procedure: Move rulesets to other files

1. Place the caret anywhere in the ruleset to move and press `F6` (Windows), `F6` (macOS), `F6` (IntelliJ IDEA Classic (macOS)), `⌘ ⌥ I` (macOS System Shortcuts), `F6` (XWin), `F6` (GNOME), `F6` (KDE), `F6` (Emacs), `F6` (Sublime Text), `F6` (Sublime Text (macOS)), `Ctrl+M` (NetBeans), `Ctrl+R, O` (Visual Studio), `⌘ R, O` (Visual Studio (macOS)), `Alt+Shift+V` (Eclipse), `⌘ ⌥ V` (Eclipse (macOS)).

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

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

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

![Rename refactoring](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_sass_rename.animated.gif)

## Checking compatibility with browsers

Besides [looking up in the
documentation popup](#ws_css_documentation_lookup), you can check Style Sheet properties for compatibility with specific browsers on the fly. This inspection is based on the [MDN Browser
Compatibility Data](https://github.com/mdn/browser-compat-data) and shows you a warning every time a property is not supported in one of the targeted browsers.

![Style sheet compatibility inspection popup](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_documentation_lookup_check_compatibility_inspection_warning_popup.png)

Procedure: Turn on compatibility check

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Inspections`.

2. Expand the CSS node and select the Property is incompatible with selected browsers. In the Options area, select the browsers you want to target and the minimum versions for them.

3. In the Options area, select the browsers to check the availability of properties against. Specify the target versions of the selected browsers.

![CSS compatibility inspection settings](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_documentation_lookup_check_compatibility_inspection_settings.png)

## Managing colors

IntelliJ IDEA provides support for [CSS color](https://www.w3.org/TR/css-color-5/) management, including [code completion](auto-completing-code.html), [quick
documentation lookup](null), and [color preview](#ws_css_change_color_values_use_preview). Coding assistance is provided for absolute, relative, and mixed colors.

![Coding assistance for color management](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_change_color_values_intro.png)

Procedure: Specify a color

* Place the caret at a `color` property, press `Ctrl+Space` (Windows), `⌃ Space` (macOS), `⌃ Space` (IntelliJ IDEA Classic (macOS)), `⌃ Space` (macOS System Shortcuts), `Ctrl+Space` (XWin), `Ctrl+Space` (GNOME), `Ctrl+Space` (KDE), `Alt+/` (Emacs), `Ctrl+Space` (Sublime Text), `⌃ Space` (Sublime Text (macOS)), `Ctrl+Space` (NetBeans), `Ctrl+Space` (Visual Studio), `⌃ Space` (Visual Studio (macOS)), `Ctrl+Space` (Eclipse), `⌃ Space` (Eclipse (macOS)), and then select the desired color value or choose color... to pick a custom one.

![Choosing a color](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_chooseColor.png)

* To use a code instead of a human-readable color name, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)) and select Convert color to <color code system> from the list, where <color code system> is [HEX](https://www.w3schools.com/colors/colors_hexadecimal.asp), [HSL](https://www.w3schools.com/colors/colors_hsl.asp), [HWB](https://www.w3schools.com/colors/colors_hwb.asp), [RGB](https://www.w3schools.com/colors/colors_rgb.asp), [lch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/lch), [oklch](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklch), or [oklab](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/oklab).

![Use code instead of color name](https://resources.jetbrains.com.cn/help/img/idea/2026.2/chooseColor.png)

Procedure: Change color

* Click a color icon in the gutter and pick the desired color in the popup.

![Picking a color](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_colorPicker.png)

* Alternatively, place the caret at a color property, press `Alt+Enter` (Windows), `⌥ ⏎` (macOS), `⌥ ⏎` (IntelliJ IDEA Classic (macOS)), `⌥ ⏎` (macOS System Shortcuts), `Alt+Enter` (XWin), `Alt+Enter` (GNOME), `Alt+Enter` (KDE), `Alt+Enter` (Emacs), `Alt+Enter` (Sublime Text), `⌥ ⏎` (Sublime Text (macOS)), `Alt+Enter` (NetBeans), `Alt+Enter` (Visual Studio), `⌥ ⏎` (Visual Studio (macOS)), `Ctrl+1` (Eclipse), `⌘ 1` (Eclipse (macOS)), select Change color from the list, and then pick the desired color in the popup.

![Change color - context menu](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_change_color_values_change_color_context_action.png)

Procedure: Toggle color preview

IntelliJ IDEA shows preview for absolute, relative, and mixed colors.

![Color preview intro](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_css_change_color_values_use_preview.png)

* By default, IntelliJ IDEA displays color preview as icons in the gutter. To show color preview in the background,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Appearance` and select the Show CSS color preview as background checkbox.

![Show color preview in the background](https://resources.jetbrains.com.cn/help/img/idea/2026.2/colorPreview_background.png)

* To restore the color preview gutter icons,   open the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | General | Gutter Icons` and select the Color preview checkbox in the Common area.

![Enable color preview in the gutter](https://resources.jetbrains.com.cn/help/img/idea/2026.2/colorPreview.png)

## Viewing the styles applied to a tag

In HTML, XHTML, JSP and JSPX files, IntelliJ IDEA can show you all the styles applied to an arbitrary tag.

![Viewing the styles applied to the tag <body>](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ws_show_styles.png)

Procedure:

* From the context menu of a tag, select `Show Applied Styles for Tag`.

IntelliJ IDEA opens the CSS Styles tool window with two panes, the left-hand pane shows the styles for the tag and the right-hand pane shows their definitions. For each tag, IntelliJ IDEA opens a separate tab.

From the tool window, you can navigate to tags and definitions of properties in your source code.

* To jump to the tag, click ![the Navigate to Tag toolbar button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.preview.svg) on the toolbar of the left-hand pane.

* To jump to the definition of a property, select it in the left-hand pane and click ![the Navigate to Style Sources button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.actions.preview.svg) on the toolbar of the right-hand pane.

## Configuring syntax highlighting

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

Procedure:

1. In the Settings dialog (`Ctrl+Alt+S` (Windows), `⌘ Comma` (macOS), `⌘ Comma` (IntelliJ IDEA Classic (macOS)), `⌘ Comma` (macOS System Shortcuts), `Ctrl+Alt+S` (XWin), `Ctrl+Alt+S` (GNOME), `Ctrl+Alt+S` (KDE), `Ctrl+Alt+S` (Emacs), `Ctrl+Alt+S` (Sublime Text), `⌘ Comma` (Sublime Text (macOS)), `Ctrl+Alt+S` (NetBeans), `Ctrl+Alt+S` (Visual Studio), `⌘ Comma` (Visual Studio (macOS)), `Ctrl+Alt+S` (Eclipse), `⌘ Comma` (Eclipse (macOS))), go to `Editor | Color Scheme | CSS`.

2. Select the color scheme, accept the highlighting settings inherited from the defaults or customize them as described in [Colors and fonts](configuring-colors-and-fonts.html).