I wrote HTML and CSS code and tried to display it using Live Server from VS Code. The text content on the HTML file displays, but there is no styling. All of the css styling is in external .css files addressed by <link …> statements. Using Inspect I can see the HTML and references to the external css files. If there are syntax errors, I can’t ‘see’ them.
Note that the css files are in the folder Styles which is in the same root folder as the HTML code which is in index.html in the HTML folder within the root folder (HTML and Styles folders are with the root folder).
And here’s a screen shot of a page I found explaining the error found with Inspect:
I think that the problem is in the way the paths to the external stylesheets are written, but I cannot see my error if that’s what it is. As I understand it, if the external stylesheet css files are in the same root folder, declaring the complete path (G:/root/styles/filename.css is unnecessary). I believe that even using the folder name that the css files are in (Styles) is even unnecessary, but I included the folder name anyway for information.
I’ve tried every combination of using forward slashes and backslashes and declaring the complete path and leaving out the Styles folder qualifier in the path. It made no difference. I’ve checked for missing <> elements and used copy and paste to find elements to prove spelling is correct.
I think I’ve looked at it too long and can no longer see it objectively. I even left for a couple hours while I did some chores hoping to come back with a fresh pair of eyes. I still could find nothing. I’ve also looked for online code checkers and tried the code but found nothing (probably because I don’t know how to use the code checkers; I just copied and pasted it and tried it.
If anyone spots my errors, please rub my nose in it long and hard. Maybe I’ll learn from the mistake.
where is your html file?
can you share what you wrote there?
I see you have an HTML folder, if your html file is in there you should write ../Styles/<file_name> to reach the css file
also you should write the name of the folder in the path with uppercase initial, like you have it in the file explorer
You can’t have that folder structure with a dev server. If you start the server inside the HTML folder, you can’t traverse out of what is effectively the root folder to get to the Styles folder. It would work if you just opened the HTML file in the browser, but you really shouldn’t use that type of folder structure.
Create a root folder for your project. Inside that folder have the index.html file and other files and folders.
If you start the server inside the HTML folder, you can not get to the Styles folder using ../Styles from the HTML folder. That is not allowed by servers. You can not traverse up and out of the root folder, which would be the HTML folder if the server is started inside that folder.
Besides, that folder structure doesn’t really make sense. It should be:
people have already started helping you here, if you have updates on your situation you can add a post here with your updates.
Please keep at one topic per issue.
If I understand you, the problem is in trying to put the HTML file in a folder of its own within the root folder?
From your example, if I put my HTML file in the root folder and put my CSS files in a subfolder (eg:Root/Styles ) I can then reference the external CSS files using for example "link rel=“stylesheets” href=“filename.css”?
OK. I gave that a try. I moved my index.html file into the root folder (BiographyTest) and the “link” tags in the HTML file are now causing my display to show that styling.
Thanks for the education.
Now, in doing that, I tried to simply move the index.html file from within VS Code by selecting it and moving the selection to the root folder line, but it wouldn’t work. I went to File Explorer and moved it causing it to show up in VS Code correctly. Apparently I need to learn more about VS Code, too.
Will try to do that. Don’t mean to cause problems.
Question: If I’m working on a project and run into multiple issues within HTML/CSS area; should I post all questions in the same thread or should I start a separate thread for each issue? For example, this thread is about using external CSS files and linking to them. I think I have this sorted but I’m running into other CSS issues. Should I post them in this thread or start a new one? I don’t want to clutter a thread with multiple topics and make future searchers who find the posts have to look through disperate topics.
For example in my post above I ran into a VS Code question. Should I have posted that in a different topic?
please keep at one topic per project. If the topic becomes so long that it is difficult to have people come help you we can consider allowing a new topic, but that’s a decision that is taken case by case.
I’m sorry. I’m new here and just learning my way around. I’ll try to do better.
Can you give me any guidelines about how to decide whether to stay in a thread or open a new topic? I’ve been opening new topics because I thought the questions and issues were unique. My posts have been more about questions that arise as I try to learn new subject matter rather than questions about how to develop a project; therefore, each has been a separate topic instead of staying within a thread.
Why does it matter if the topics are in separate threads? Perhaps if I understood that answer I’d have a better reference for deciding if the posts should be in the same or different threads.
if the thread is one, people helping you have the context available to know what’s going on, and what happened in the past while you were working on that specific problem.
Also if you have different questions on the same project, the answer could be the same, and people would be doubling their efforts in helping you
