DEV Community

Cover image for Do you keep forgetting to link your CSS file? Try this simple trick!
Savvas Stephanides
Savvas Stephanides

Posted on • Updated on

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">
Enter fullscreen mode Exit fullscreen mode

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.

Image description

Your HTML contains a div which looks like this:

<div id="hello">Hello world!</div>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo)

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?

Collapse
 
savvasstephnds profile image
Savvas Stephanides

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.

Collapse
 
schemetastic profile image
Schemetastic (Rodrigo) • Edited

Wow! I'm wondering if the same happens with <script> tags, hahaha.

Thread Thread
 
savvasstephnds profile image
Savvas Stephanides

Yes it does. The trick also works with script tags πŸ˜€

Thread Thread
 
schemetastic profile image
Schemetastic (Rodrigo)

Hahaha... welll, that's a place I'd been before I think...

Collapse
 
craftyminer1971 profile image
CraftyMiner1971 • Edited

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

Collapse
 
savvasstephnds profile image
Savvas Stephanides

That's even better! πŸ˜‚

No annoying pop-ups 😬

Collapse
 
windyaaa profile image
Windya Madhushani

Nice article.

Collapse
 
savvasstephnds profile image
Savvas Stephanides

Thank you so much Windya! πŸ‘Š

Collapse
 
yasas770 profile image
Yasas770

Nice one

Collapse
 
savvasstephnds profile image
Savvas Stephanides

Thank you!