Intro

In our previous lesson, we created a CSS file, but if we started adding CSS code, nothing would happen with our web page.

This is because our CSS file is not connected to our HTML file, so let’s go over how to connect them now.

Steps

link element

To connect our CSS file to our HTML file, we need to use the link element. The link element always goes inside the head element.

First, put your cursor at the end of line 6, at the end of the meta element. Technically we could put the link element anywhere inside the head, but I tend to always put it after the meta elements and before the title element.

Create three new lines inside the head just so we have more room.

Then go back up to line 8 and press Tab so you’re indented. Then start typing the word link.

Use the arrow keys to select this snippet that says link:css and press Enter.

This will generate the entire link element with the rel attribute and the href attribute.

href attribute

The rel attribute has the value of stylesheet, which is correct, but we need to change the value inside the href attribute.

The href attribute is where you put the name of your CSS file. The file name defaults to style.css, but we can change it to main.css.

In VS Code, the file name is also highlighted automatically right after we create the element, so you can just start typing to change the name. So type out main instead of style.

Remember, if your file is stored inside a folder, you need to include the folder name at the beginning of the value, followed by a slash.

Here’s an example of what this might look like if our CSS file was in a folder called css (you don’t have to write this, it’s just an example):

End

So that’s how you link a CSS file to an HTML file.