Pycharm - HTML and CSS Integration


HTML and CSS are well supported in PyCharm Editor. PyCharm Editor includes a special shorthand and provides tag completion for HTML.


Emmet is the shorthand used in PyCharm editor. It includes various features such as abbreviation preview, automatic URL recognition and edit points, for HTML and CSS files.The user interface of the settings section is shown in the screenshot given below −


Creating HTML and CSS files

PyCharm includes an inbuilt feature for creating HTML and CSS files. The basic steps for creating new HTML and CSS files are as follows −

Creating Html

Now, mention the name of file while creating HTML files in the project as shown below −

Html File

This creates the sample-file.html file as shown below −

Sample File

Creating CSS file

The steps for creating a CSS file are shown here −

From the New menu, select the File option as shown below −

Creating Css

Specify the name of CSS during its creation as shown here −

Css Demo

You can see the complete project structure with various files mentioned in different color combinations as shown below −

Color Combination