How to Link to a Stylesheet in a subfolder - html

I have an HTML file, index.html, for my website, in a folder. This folder contains the index.html file, and another folder called "Stylesheets", with the stylesheet.css file inside. How do I link to it? I know how to do a link tag, but the href bit is giving me a bit of trouble. I've tried
href="../stylesheets/stylesheet.css"
and a few variants of it with the dots. Any ideas? I've tried a couple google searches but the question is a bit too complex to describe in a simple google query. Please Help!

Your path - href="../stylesheets/stylesheet.css" is basically doing the opposite of what you want.It's not going one folder further as you wish.
To accomplish what you want, you are going to have this path:
href="stylesheets/stylesheet.css"
Here you can read more about File Paths.

Use href="stylesheets/stylesheet.css" or href="./stylesheets/stylesheet.css"
Both mean the look for stylesheet.css file inside the stylesheet folder inside the current folder.

Related

Linking CSS to HTML

enter image description herefirst time posting here. I restructured all the files on my website since I wanted to experiment with how to organize files, and I ran into a few issues. When I launch the site HTML appears but the CSS stylesheet doesn't seem to want to attach. I also think the js sheet is also not attaching properly but can't test it till css shows up. I double-checked spelling as well as placed the index.html on the root folder but still nothing I'll post the code below and hopefully someone can help me out. I appreciate you guys.
When you link a CSS or JS file to an HTML file, you need to provide a relative path from the HTML file to the CSS or JS file. In this case, it looks like index.html is already in the Root directory, so you shouldn't include that in the CSS file paths. The relative path to the css files (the path from the directory where index.html is to where the css file is) would be /Css/index.css, and the same for your javascript files (/Scripts/index.js).

Html directory link not working if the directory is not from the beginning

My problem is that I have a bunch of HTML files but in simple I have public_html/pages folder + index.html/under pages folder a dmca.html is located.
So when I want to locate the file using href = "pages/dmca.html" it doesn't work and on another side when I use "../../public_html/pages/dmca.html" from the beginning it works is it normal or something wrong so I can only use the simple way as I have mentioned above(the link)
You have to look where is the .html file located on the hierarchy. If you are in dmca.html and you have a href on that page to second.html, you will need to jump backwards to the pages directory, and then go to the file: ../second.html
Now, if you are in index.html, and you have a href linking to dmca.html, you will need to hop back one level, enter pages directory, and choose the .html file. So it would be like this: ../pages/dmca.html
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
If I have not explained myself correctly, or I've understood the question wrong, please tell me.
What is happening, if I understand the problem properly, is that you are in index.html, and you want to href dmca.html, but the route you use pages/dmca.html, doesn't work, but if you use ../../public_html/pages/dmca.html, then, it does work. And I guess you are asking why is this happening.
Well, what happens when you use pages/dmca.html is that you are saying: search for a subdirectory called 'pages' and go to the file inside it called dmca.html. This would be correct if you had this hierarchy:
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
But index.html is a file, so it can't contain subdirectories. That's why you have to go one level up the hierarchy, and then, once you are in public_html/ you can choose to load index.html or go to the subdirectory public_html/pages and choose a file from it.
Right now I'm working on my web page, and... rethinking about it, I have to say that you were right, I mean, what you were doing was supposed to work.
Look at my directories. I have a htdocs folder, inside it I have some .png, index.html, and a folder called "prova", inside the folder "prova" I have index2. You can see that it is the same case as yours. I have an href on index.html that says href="prova/index2.html" and it works for me. Actually what I've said to you on the morning is wrong. I'm sorry :/
Because if I write ../prova/inedx2.html what happens is that the folder "htdocs" is removed from the URL. Remaining as: "PortàtilHP_antic_pare/prova/index2.html" You can see that the folder between "PortàtilHP_antic_pare" and "prova", which should be "htdocs", has disappeared.
So now I'm wondering how my answer has been useful for you. I guess I have understand it wrong, and somehow, my answer has made you change something that somehow has worked.

VSCode: CMD clicking css file location brings up different file path and suggests create a file

A picture is worth a thousand words so here it is;
Picture, I am confuesed
I do not know why it does not link up with my css file I have created, it is exact file path!
Can anyone please help me, I want to style my handlebars and I cannot!
Thanks
anything that starts with ./ is a relative path. It's relative to the current file path. As the error suggests, it is therefore looking for a styles folder inside views/layouts.
Use either
styles/styles.css
or
../../styles/styles.css

CSS won't link to my HTML

I've been trying to resolve this issue with my website (www.wintonbrownmusic.online). I've attached a picture of how my site looks locally. When I upload it through GoDaddy, the site looks differently. I understand that others have had this issue but not sure where/how to change the CSS file to link to my website so it'll look the way that it should. Can someone assist?
I'm not sure what your hosting / creating it with, but I had a quick look at your site and found one issue.
Your HTML file is looking for the bootstrap.css file in the assets/css folder, but it appears to be in the root folder.
unless your hosting with something that is supposed to find it there.
not sure.
but when is use http://www.wintonbrownmusic.online/assets/css/bootstrap.css is doesn't work, but if I use http://www.wintonbrownmusic.online/bootstrap.css it does work.
hope that helps.
You have problems with path, If you open the console in inspect element it will show you that you have problems in calling the required files css, js, and other files.
You need to upload folders properly in the host, you need to add folders like you have in local folders in your computers. "assets" folder is missing and you just upload files inside there.
change your folder name as either assets or css ....
assets/css is a folder name because of the slash (/) browser looking for css folder inside assets folder...just give the folder
name correctly try to avoid usage of special character ,punctutation
in folder name

Refencing a file in a parent directory

This probably a silly question but,
I have a project set up on my Desktop at:
~/Desktop/composer/
Inside this directory I have my folders:
css and templates
Inside my templates folder I have my index.html file, and I need to reference my css file in my css folder, but I can figure out how
I have tried:
/../css/style.css and /../../css/style.css, but neither of them work.
Thanks for your help.
You need to remove the leading /, since it denotes the root of your filesystem. Try ../css/style.css.