Why is my CSS file not linking to my HTML file on VS Code?
I think the problem is in the rel you should use stylesheet instead of stylesheets
<link rel="stylesheet" href="stylesheets.css">
and make sure stylesheets file and HTML file in the folder
How to Link Css Externally In Virtual Studio Code
you need to adjust your css file path if your style.css
is in css folder in same directory you need to <link rel="stylesheet" href="./css/style.css">
if you're using windows you can simply click ctrl
and href
link, it'll show you if path exist in that directory
Why local images/links don't work on HTML on VS Code?
Based on your directory structure, in your link and image references, you don't need to provide a more "full" path, you can reference it correctly using a relative path, stepping into the next folder lower in the directory using a dot and a slash ./
, like this:
<img src="./images/icons/spider.svg" alt="Spider-Man Multiverse">
If you must use a more "absolute" path, then you have to step out upwards from the current directory using 2 dotted ellipsis and a slash ../
as many times as needed depending on how deep the folder goes like this:
<img src="../spider-verse/assets/images/icons/spider.svg" alt="Spider-Man Multiverse">
But the first approach is the more understandable one.
In the same manner, the link and script files should be referenced this way:
<link rel="stylesheet" href="./css/home-page-styles.css">
<script src="./scripts/card-hover-animation.js"></script>
As with the image tag, if you wish to use a more full path then, the link and script files should be referenced this way:
<link rel="stylesheet" href="../spider-verse/assets/css/home-page-styles.css">
<script src="../spider-verse/assets/scripts/card-hover-animation.js"></script>
CSS file not linking to HTML
I inserted your code, verbatim, into a JSFiddle, and the background is red, as you wanted.
The code is not the issue, then. Instead, its a problem of the stylesheet loading properly. Try some or all of the following:
- Check your stylesheet name, and that it is the same in the directory as it is in your HTML code; make sure
stylesheet.css
exists properly. - Double-check that the file exists in the right place, which is in the same directory as your index that you are opening.
- Make sure the stylesheet is loading. In Chrome, if you right-click -> inspect element and go to the sources tab, you can see all loaded resources, including your CSS. If it's not loading here, it could be that it tries to load from your cache. You can force Chrome to load sites without the cache by opening the inspector again, clicking on the gear menu, and checking "Disable cache (while DevTools is open)', and reloading your site.
- Check your local apache/webhost server to make sure that it doesn't have any settings blocking the loading of certain files or types of files. This is assuming you are running one and not just opening the file in Chrome/IE. If that is the case, you should have no problems with the file loading.
- Make sure you saved the file. It's silly, but I can personally vouch for the time when I couldn't make my site update, and I forgot to save/update the file I was viewing.
Related Topics
Angular: *Ngif Tag on Input Element Causes It to Be Undefined. Cannot Read Value from Input Field
Does Id Have to Be Unique in the Whole Page
Is Putting a Div Inside an Anchor Ever Correct
Is It Valid to Replace Http:// With // in a ≪Script Src="Http://..."≫
How to Override Bootstrap CSS Styles
Mobile Redirect Using Htaccess
How to Make a Gap Between Two Div Within the Same Column
Css Negation Pseudo-Class :Not() For Parent/Ancestor Elements
Rendering Problems Using Flexbox in Firefox and Chrome 48
Loading Images from External Folder to Component Angular 2
Change Background Color of Iframe Issue
Why Does This CSS Margin-Top Style Not Work
Applying an Ellipsis to Multiline Text
What Are the Default Margins For the HTML Heading Tags (≪H1≫, ≪H2≫, ≪H3≫, etc.)
Is a Url Allowed to Contain a Space