How can I link CSS and HTML in different folders?

Question

I have a stylesheet named style.css which is located inside a folder named css

And a HTML file named template.html in a folder named html

Both the folders are inside a folder named WebSite ( I guess that's the root folder. I'm new to html )

I want to link style.css to template.html using relative path.

My folder structure :

WebSite
      |
      |--css
           |
           |--style.css
           |
      |--html
            |
            |--template.html
            |
      |--index.html

I tried using <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" /> It didn't work

For more clarity I tried using view-source: before the url and clicked on the link but it showed

storage/emulated/0/WebSite/html/css/style.css (No such file or directory)

I am using Acode free app on Android mobile.

@Naveen K R why are you keeping template.html file inside html folder? Bring template.html file out of html folder and that will work — sunjeep, Apr 12 '20 at 04:05
I'm trying to organize everything and keep everything in respective folders. — , Apr 12 '20 at 04:07

Daniel Ocampo · Answer 1 · 2020-04-13T00:12:02.050

1

I have misread what you were actually asking for my fault. First I would test out linking the css sheet with a test html document to see if its something to do with the app. I dont know how "view source" works in this case but the view source is saying that your css folder, thus your css sheet is inside your html folder and according to your diagram explaining your folders, that is not true. In that case then your style sheet link would be <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> An actual screenshot of your folder system , though not necessary, would be nice.

edited Apr 13 '20 at 00:12

answered Apr 12 '20 at 03:45

Daniel Ocampo

23
5

I didn't get you about index.html being it's own folder – Apr 12 '20 at 04:02
I tried "../css/style.css" , "/css/style.css" , "~/css/style.css" and *../../css/style.css" nothing worked – Apr 12 '20 at 04:05
After each change I used view-source: and clicked on the link and it shows: /storage/emulated/0/WebSite/html/~/css/style.css (No such file or directory) – Apr 12 '20 at 04:06
your answer is true ... please edit answer and describe better than this. – Amirhossein Apr 12 '20 at 07:35

How can I link CSS and HTML in different folders?

1 Answers1