Help I need to link my css and html documents in vs code | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
0

Help I need to link my css and html documents in vs code

I tried multiple times to link html with the style sheets but none has changed but when I add a style in the html it works ... help I want to do my work on different documents

19th Jan 2022, 3:31 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
32 Answers
+ 1
Calvin, I found this in stackOverflow, it seems to be a similar problem. https://stackoverflow.com/questions/56808188/live-server-not-loading-css-file
20th Jan 2022, 5:16 AM
Ipang
+ 4
Have you tried to: * Verify the CSS file path validity? * Force refresh browser https://www.wikihow.com/Force-Refresh-in-Your-Internet-Browser * Verify whether any CSS rules were working, or none was working.
19th Jan 2022, 3:42 AM
Ipang
+ 2
Can you describe/illustrate your directory structure and the <link> tag? (no full code just the tag) it might help us to try to figure it out, at least we have an idea how your directory was structured ...
19th Jan 2022, 4:21 AM
Ipang
+ 2
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"
20th Jan 2022, 3:57 PM
SUJAN
SUJAN - avatar
+ 2
@Calvin Nelson Mrema Vsc user here and I had the same problem in the beginning. To link CSS to a HTML (example) : <head> ... <link rel ="stylesheet" href = "user1/desktop/folder1/folder2/filename.css"> ... </head> I don't know if it will help, but the only way I found to link sheets, images, websites etc using vsc, is by checking the following things... So, make sure: • to copy the whole path, it's annoyng but I've not found another good way to make it work *note: the path in my example is actually a random example, since an actual complete path is way longer • the slash / is there before the css file name, because sometimes vsc pastes the path without the slash and somehow it doesn't work; • to write also .css at the end of the file name. Also, if you're using a dark theme extention on your brower, maybe you should temporary deactivate it, just in case
20th Jan 2022, 3:58 PM
krssclaire
krssclaire - avatar
+ 2
The problem is solved by just changing the theme from black to any other theme. If only you foundation on html is fine then everything will fall into place..... THANK YOU ALL SOLO SOCIETY
23rd Jan 2022, 7:00 PM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
+ 1
I have tried that I even tried to delete all browsers and reinstalling them again
19th Jan 2022, 3:47 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
+ 1
Does this happen to all your HTML documents or just some of them? if it happens only with some, then it might be path issue. Too little info to tell actually, we don't know your directory structure, how you link the CSS or whether the CSS file content were valid.
19th Jan 2022, 3:56 AM
Ipang
+ 1
You didn't specify any path in 'href' attribute value, so this will only work when the HTML and CSS file reside in the same directory. If the CSS file resides in other directory, you need to specify the path. Learn more about paths here https://www.w3schools.com/Html/html_filepaths.asp
20th Jan 2022, 3:56 AM
Ipang
+ 1
https://code.sololearn.com/W3guaryj0UwQ/?ref=app Read Examples & Note Calvin Nelson Mrema
20th Jan 2022, 4:00 PM
TaNiSha[inåçtïvë]
TaNiSha[inåçtïvë] - avatar
+ 1
What is the name of your external css file, if it is cssfile then in the head tag add <link rel="stylesheet" href="cssfile.css" > If the css file and html files are in the same directory then maybe the problem is that you havent added the extension .css to the path
20th Jan 2022, 4:38 PM
Alex Mtui
Alex Mtui - avatar
+ 1
<link rel="stylesheet" href="fileAddress/fileName.css" /> if your CSS file is in the same folder, just write the CSS filename. if it's in another folder you have to use ' ../ '. each time it goes one folder back. so if you want to go three folders back you shoold write : ' ../../../folderName/fileName.css' It is better to follow uppercase and lowercase letters.
20th Jan 2022, 5:33 PM
Hamid Reza Sadati
Hamid Reza Sadati - avatar
0
All of my pages. The structure is fine and the link is doing great because I have tried linking it on another text editor like sublime text and it works fine but am really into vs code
19th Jan 2022, 4:09 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
0
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements Internal - by using a <style> element in the <head> section External - by using a <link> element to link to an external CSS file Have you done this correctly? You can verify the CSS file path too (as Ipang said) Have you done something significant in that file? That it would change the color or something else? However, till the problem gets solved, you can try the Internal method (ii).
19th Jan 2022, 4:09 AM
NEZ
NEZ - avatar
0
Am using the internal method but the external method is giving me problems. I even tried to change the bgcolor on a fundamental page but it still doesn't work I've learn from different sources and still there is no progress
19th Jan 2022, 4:15 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
0
There must be the problem in the file path, try verifying it correctly!
19th Jan 2022, 4:16 AM
NEZ
NEZ - avatar
0
There could be a plenty of reasons why it doesn't work, but I'll give one Maybe you used \ backslash instead of / forward slash in your path. This happens when you copy path from vs code.
19th Jan 2022, 10:18 PM
Lofty
Lofty - avatar
0
<link rel ="stylesheet" href = "cssfile">
20th Jan 2022, 3:44 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
0
The structure is fine I just use a fundamental structure for trial
20th Jan 2022, 3:45 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar
0
I cross check the problem while copying the path which I myself didn't know and solved it but it still doesn't work
20th Jan 2022, 3:48 AM
Calvin Nelson Mrema
Calvin Nelson Mrema - avatar