Setup

For this section, create a new project folder called basics and create the file index.html inside the folder.

Type ! and pressed Tab inside index.html to create all of the boilerplate code.

Add one h1 element and one paragraph element inside the body of index.html.

Use the lorem shortcut to create a paragraph of text inside the paragraph element.

Intro

Let’s go over how to create a CSS file.

Creating a CSS file is very similar to creating an HTML file.

The big difference is that CSS files end in a .css file extension instead of a .html extension.

Create file

To create a CSS file, go to the Explorer panel and click the New File button. Then you need to give the file a name.

Unlike HTML, where the home page is always called index.html, you can pretty much name your CSS file anything you want. You should pick a name that makes sense, however.

Since this is the main CSS file in the project, I like to call it main.css, but you can use a different name. Then, press Enter and the file should appear in the editor.

Right now we’re only creating one CSS file, but you can technically have more than one CSS file in your project.

Another big difference between CSS and HTML is that CSS doesn’t require any boilerplate code. We can just start with a blank file and start writing our CSS code.

End

So that’s how you create a CSS file in VS Code.