Help I need to link my css and html documents in vs code | Sololearn: Learn to code for FREE!

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

1/19/2022 3:31:07 AM

Calvin Nelson Mrema

32 Answers

New Answer

+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

+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.

+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 ...

+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

+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

+1

I have tried that I even tried to delete all browsers and reinstalling them again

+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.

+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

+1

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"

+1

https://code.sololearn.com/W3guaryj0UwQ/?ref=app Read Examples & Note Calvin Nelson Mrema

+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

+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.

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

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).

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

0

There must be the problem in the file path, try verifying it correctly!

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.

0

<link rel ="stylesheet" href = "cssfile">

0

The structure is fine I just use a fundamental structure for trial

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