The question is: Where is your html file? Obviously not in the root folder, but probably in another sub folder. Try this
<link rel="stylesheet" href="../css/style.css" />
This navigates one level up and then into the css folder.
The question is: Where is your html file? Obviously not in the root folder, but probably in another sub folder. Try this
<link rel="stylesheet" href="../css/style.css" />
This navigates one level up and then into the css folder.
I would add the attribute type and value "text/css" Your link tag would end up like this:
<link rel="stylesheet" href="css/style.css" type="text/css"
I tried using bootstrap in my code for the first time and then after that my previous css work would not display. Now even though I’ve cut out the bootstrap and even tried making another simple bellow world page just to check , simple css like color won’t work. I’ve tried internal and inline Internal seems to be working for a complicated homepage but doesn’t for a simple hello world
EDIT- here’s my code And
This is it without bootstrap
Videos
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.
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!!
I had the same issue. So, I solved it by adding
"files.associations": {
"*.css": "css",
"css": "css"
}
to my my settings.json file. Don't know is it is going to help you, but anyway. Good luck!
When I'm using a basic style.css file, even after adding "postcss": "css" in "emmet.includeLanguages":{} CSS Intellisense still doesn't work.
Disabling the postcss VSCode extension allows CSS Intellisense to work properly for me.
It appears that you have successfully created the CSS file in the directory where your index.html is present. Just write the CSS in it and if the styles are not applied then check if you have linked the CSS file correctly to the html or not. With your current setup you can link it with this link tag:
<link rel="stylesheet" href="style.css" type="text/css">
Put this link tag within the head tags
the "#" is the basic icon in VSCode to define a css file, did you link your css to your html?
<link rel="stylesheet" href="./style.css">