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
scripttags 😀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!