Do you keep forgetting to link your CSS file? Try this simple trick!

Ask any developer about one of the most frustracting things about web development, and you'll hear one thing again and again:

My HTML couldn't read my CSS file, and I spent 3 hours trying to fix it, only to find out that I forgot to link my CSS to my HTML 😡

What this means is that, to make any sort of styling into your HTML, you'll have to add this line if you have CSS in a different file:

<link rel="stylesheet" href="style.css">

All too often though, developers tend to create their CSS file, but completely forget to include the link line. This has been a cause for frustration for countless developers

If you're one of those developers who constantly forgets to link their CSS file to the HTML, I have a neat trick for you!

What can we do about it?

The trick is quite simple really: Instead of creating the CSS file, add the <link> line in your HTML first and let VS Code create the file for you! Let me show you an example.

First let's create a project with an HTML file. No CSS yet.

Your HTML contains a div which looks like this:

<div id="hello">Hello world!</div>

Now, instead of creating the CSS file and linking it (which you'll probably forget), add the link tag in your HTML first!

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My site</title>
+    <link rel="stylesheet" href="style.css"/>
</head>

Now here's the trick:

Drag your mouse where the link line is, click the Control/Command button on your keyboard and click the CSS file name.

VS Code will tell you that this file doesn't exist (duh!) and will conveniently show you a big blue button to create the file!

And there you have it! You have a brand new CSS file and it's linked to your HTML file!

What do you think of this trick? Give it a try!