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!
Answer from yaromir-zhuavsky on Stack OverflowI 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 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.
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!!
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"
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">
I’m building a website on VS Code consisting of HTML and SCSS code. When I open the website on Google Chrome, using the Live Server extension for VS Code or from the file on my computer, it should show all the changes I made to HTML and SCSS. However, only HTML changes show up in the browser. Any changes made to SCSS don’t show up. This problem started about two weeks ago. Before then, all changes to SCSS were showing up without issue.
I’ve tried opening the project with Live Server and from my file on my computer, a hard refresh on Google Chrome, reinstalling the Live Server extension on VS Code, and updating VS Code. None of these steps solved the problem.
Any help would be greatly appreciated.
Your CSS declaration
h1 {
color: red;
}
may be directly in your .html file, but then it must be inside the <style> tag, which must be in turn inside the <head> tag:
<head>
<style>
h1 {color: red;}
</style>
</head>
so your full code will be
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 {color:red;}
</style>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
You Can try either applying inline css properties to your h1 tag like:
<body>
<h1 style="color:red;">Hello</h1>
</body>
Or you can put your code in tag like:
<head>
<style>
h1 {color: red;}
</style>
</head>
Or you can use an external css file and link it in your head section.