html not linking to css file in Visual Studio Code
Question
Environment
- Windows 8.1 64bit
- Visual Studio Code 1.15.1
Related question
Issue
html doesn't link to css
- Classes and ids in css don't show up on Intellisense in html.
- When I put the cursor on a class or id in html and press F12 to jump to css, a window pops up and says "the definition wasn't found."
However, when I open the html in a browser, the webpage is shown perfectly fine. So it seems like there is something wrong with my Visual Studio Code.
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="abc"></div>
<div id="xyz"></div>
</body>
</html>
css
.abc{
width: 100px;
height: 100px;
background: red;
}
#xyz{
width: 100px;
height: 100px;
background: blue;
}
files
index.html
css
|
+---style.css
webpage
I'd like to know how to get rid of this issue.
Edit 17/9/3 19:03
Thanks for the answers, guys. The following didn't work.
-
href="../css/style.css" -
href="~/css/style.css" -
href="css/style.css" - Embedding stylesheet in tag (And I want to keep css in a separate file)
3 answers
solution1
2 2017-09-04 21:54:27
I don't believe jumping to css classes and ids is supported natively by Vscode. Try the CSS Peek extension, it does what you want nicely.
solution2
0 2017-09-03 05:51:36
Make sure that the path you provided to access style.css file is correct. If that doesn't work, try adding inline css in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css" media="screen">
.abc{
width: 100px;
height: 100px;
background: red;
}
#xyz{
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="abc"></div>
<div id="xyz"></div>
</body>
</html>
This is an alternative Solution.
According to me your browser is not refreshing the file so you can refresh/reload the entire page by pressing CTRL + F5 in windows for mac CMD + R
Try it if still getting problem then you can test it by using firebug tool for firefox.
For IE8 and Google Chrome you can check it by pressing F12 your developer tool will pop-up and you can see the Html and css.
You can also try this syntax:
<link href="./css/style.css" rel="stylesheet" type="text/css" media="screen, projection"/>
Make sure that the browser actually makes the request and doesn't return a 404.
Hope It Helps!!
solution3
-1 2021-06-09 18:32:30
If html and css are in the same directory, it should work. How could it be it doesn't? Well, if the preview copys the html to a temporary directory before showing it, the css will not be there. That's the only way I can imagine this problem exists.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.