This content originally appeared on DEV Community and was authored by Savvas Stephanides
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!
This content originally appeared on DEV Community and was authored by Savvas Stephanides
![](https://www.radiofree.org/wp-content/plugins/print-app/icon.jpg)
Savvas Stephanides | Sciencx (2023-05-18T15:10:15+00:00) Do you keep forgetting to link your CSS file? Try this simple trick!. Retrieved from https://www.scien.cx/2023/05/18/do-you-keep-forgetting-to-link-your-css-file-try-this-simple-trick/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.