HTML and CSS Editor
PhpStorm's advanced editor provides you with the very best coding assistance for working with HTML and CSS.
Be more productive with smart code completion, on-the-fly error detection and quick-fix options, code navigation and refactorings, and enjoy the support of a wide range of modern technologies for developing user interfaces.
The IDE provides smart code auto-completion for HTML tags, attributes and classes and CSS properties and
values including HTML5- and CSS3-specific ones. Coding assistance works for language mixtures, for example,
for inline styles in HTML.
The editor is also aware of project files and provides suggestions for file references:
Formatting & Syntax Highlighting
The editor highlights the structure of HTML and CSS code and provides automatic code formatting. Code Styles, for example the indents, can be easily configured in project settings, as can be the color scheme. You can also import or export these settings to share with your team:
Error Detection and Quick-fix Options
The code editor provides on-the-fly error detection for HTML and CSS and suggests fix options before you open the browser, for the following issues:
- missing closing tag and required attributes
- invalid attributes or properties and illegal values
- wrong references to files in links, and much more
Refactorings for HTML and CSS help you keep your code free of errors as you rename classes or extract your inline CSS:
Powerful code navigation helps you save time and be more productive:
Breadcrumbs bar, tag tree highlighting and Structure view allow you to quickly navigate through the nodes hierarchy in your HTML file.
With navigation options like Go to symbol and Find/Highlight usages, you can reach any location in your project in no time.
Quick Definition and Applied Styles
Quick Definition immediately displays the actual styles defined for a particular class or id in a popup as you edit an HTML file. Invoke it on an image reference to see an image preview.
Show Applied Styles for Tag feature allows you to see all the styles applied for a particular tag and navigate to the source CSS code:
Less, Sass, SCSS and Stylus support
IDE provides support for modern stylesheet languages: Less, Sass, SCSS and Stylus. It includes:
- code completion and syntax highlighting
- code formatting
- structure view and breadcrumbs bar (for Less and Sass only)
- automatic compilation to CSS with File Watchers, and more
Please note that support for some IDEs may be provided via a free plugin:
Live Templates allow you to create easy-to-use code snippets for HTML and CSS. There are many predefined templates, but you can also create your own. Write the code for the template, add variables, select the abbreviation and specify the usage scope:
The IDE allows you to utilize the full power and speed of Emmet toolkit. Emmet abbreviations help you generate HTML and CSS code with less effort.
Use the Output preview in HTML to make sure your Emmet abbreviation is correct before you expand it: