JetBrains

HTML and CSS Editor


PyCharm'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.






Code Completion

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:


Code Completion
Formatting & Syntax Highlighting





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:

Error Detection and Quick-fix Options





Code Navigation

Powerful code navigation helps you save time and be more productive:

Error Detection and Quick-fix Options

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:

Quick Definition and Applied Styles





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:

Less, Sass, SCSS and Stylus support





Live Templates

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:

Live Templates

Live Edit

Live Edit feature allows you to see page content updates in the browser (Google Chrome only) immediately, without reloading, with the changes you make in your HTML and CSS files.
Live Edit is available as a free plugin:

Live Edit





Emmet

Emmet

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:





See also: JavaScript Support

Check out how PyCharm helps you develop with JavaScript. More info »

Free 30-day trial