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!
Hahahaha, how is it possible to forget that? I mean, generally when you CSS that's the first thing you do!!! Also, is not April! What?