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!
Top comments (11)
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?
It's a lot more common than you might think. All you have to do is search "forgot html link" on Twitter and you'll get tons of tweets with the same frustration. I do it all the time, everyone will do it at some point.
Wow! I'm wondering if the same happens with <script> tags, hahaha.
Yes it does. The trick also works with
script
tags πHahaha... welll, that's a place I'd been before I think...
Brilliant! However, I don't know if it's the way I've got VSC set up, or what. But, when i did this and ctrl+clicked on the styles.css link, it didn't bring up a dialog box, but just opened the file, like it existed already!
If only there was a way to create a fully formatted css file with all the code already in it! HAHA
That's even better! π
No annoying pop-ups π¬
Nice article.
Thank you so much Windya! π
Nice one
Thank you!