correct way to import CSS and JS in HTML file

Question

I have folder hierarchy like this

how to add css and js file in this index.jsp

browser developer tools

i have attached the creen shot, the css and js files are in the respective folder — Ayush, Oct 12 '18 at 15:04
@Ayush - Do you mean from within one of the .jsp files? Is it served with the `/jsp` part in the path? — T.J. Crowder, Oct 12 '18 at 15:04
Post your question **as text** (you can *also* post a picture), but you should show the hierarchy as text. Why: http://meta.stackoverflow.com/q/285551/157247 — T.J. Crowder, Oct 12 '18 at 15:05
i need to import css from another foder in jsp from another folder — Ayush, Oct 12 '18 at 15:05

score 1 · Answer 1 · edited Oct 12 '18 at 17:10

1

It all depends on the paths they will have from the browser's perspective. If the browser sees the hierarchy you've shown, then from any of the .jsp files in your jsp directory, you'd use

<link rel="stylesheet" href="../css/filename.css">

The .. goes up one level (from jsp to your root), and then /css goes into the css directory.

You could use root-relative URL like /css/filename.css, but that will break if you put this whole thing somewhere other than the root on the server.

edited Oct 12 '18 at 17:10

Anshuman

758
7
23

answered Oct 12 '18 at 15:07

T.J. Crowder

1,031,962
187
1,923
1,875

`/css/filename.js`. JS file in ``, it's confusing. – Anshuman Oct 12 '18 at 16:29

score 1 · Answer 2 · answered Oct 12 '18 at 15:13

If you want to add css and js files inside one of the jsp files, add these inside head

For CSS

<link rel="stylesheet" href="../css/filename.css">

For JS

<script src="../js/filename.js"></script>

Here .. represents the directory above the jsp (one level up) then /js or /css will goto respective directory.

score 0 · Answer 3 · answered Oct 12 '18 at 15:28

0

See this answer for the correct way to organise your files in a Tomcat application.

The path to your CSS files should be:

<link rel="stylesheet" type="text/css" href="./css/styles.css" />

answered Oct 12 '18 at 15:28

Yvonne Aburrow

2,602
1
17
47

`href="./css/styles.css"` should be `href="../css/styles.css"` – Anshuman Oct 12 '18 at 16:34
See this link: https://www.bennadel.com/blog/3244-non-module-file-paths-are-relative-to-the-working-directory-in-node-js.htm it depends how the application is served. Also the OP has already said that `"../css/styles.css"` doesn't work. – Yvonne Aburrow Oct 12 '18 at 16:35

correct way to import CSS and JS in HTML file

3 Answers3