17

I have a css folder at the root of my Java Web Application. My import statement looks like this:

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

The style is not being applied, so I assume that the path to the css directory is not being specified correctly. How do I specify that the css directory is at the root of the Project folder?

My project folder contains:

build
css
dist
nbproject
src
web
build.xml

The html page that I am viewing is index.html, and the URL shown is localhost:8080/ServletApp/

Christian Stewart
  • 15,217
  • 20
  • 82
  • 139
user1154644
  • 4,491
  • 16
  • 59
  • 102

3 Answers3

47

Background

Absolute: The browser will always interpret / as the root of the hostname. For example, if my site was http://google.com/ and I specified /css/images.css then it would search for that at http://google.com/css/images.css. If your project root was actually at /myproject/ it would not find the css file. Therefore, you need to determine where your project folder root is relative to the hostname, and specify that in your href notation.

Relative: If you want to reference something you know is in the same path on the url - that is, if it is in the same folder, for example http://mysite.com/myUrlPath/index.html and http://mysite.com/myUrlPath/css/style.css, and you know that it will always be this way, you can go against convention and specify a relative path by not putting a leading / in front of your path, for example, css/style.css.

Filesystem Notations: Additionally, you can use standard filesystem notations like ... If you do http://google.com/images/../images/../images/myImage.png it would be the same as http://google.com/images/myImage.png. If you want to reference something that is one directory up from your file, use ../myFile.css.

Your Specific Case

In your case, you have two options:

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

The first will be more concrete and compatible if you move things around, however if you are planning to keep the file in the same location, and you are planning to remove the /ServletApp/ part of the URL, then the second solution is better.

Christian Stewart
  • 15,217
  • 20
  • 82
  • 139
1

You have to move the css folder into your web folder. It seems that your web folder on the hard drive equals the /ServletApp folder as seen from the www. Other content than inside your web folder cannot be accessed from the browsers.

The url of the CSS link is then

 <link rel="stylesheet" type="text/css" href="/ServletApp/css/styles.css"/>
yunzen
  • 32,854
  • 11
  • 73
  • 106
0

if the file containing that link tag is in the root dir of the project, then the correct path would be "css/styles.css"

Milad.Nozari
  • 2,243
  • 3
  • 26
  • 47
  • 3
    No, that's relative to the current page. What if they were at site.com/mypage/page/? – Christian Stewart Jul 12 '13 at 18:10
  • yes that's relative to the current page. That's why I said "if the file containing that link tag is in the root dir of the project". Pay attention dude :| – Milad.Nozari Jul 12 '13 at 18:11
  • That's a major issue - what if they moved the page? The idea of `/` links is that if they ever move the page, it will still work. – Christian Stewart Jul 12 '13 at 18:12
  • Well, the question here is, do you know what a relative path is??? The title of the question is "relative path to CSS file". And that's a relative path. If you specify a relative path there's always the problem you mentioned, if you move any of the files, something will break. – Milad.Nozari Jul 12 '13 at 18:16
  • Who doesn't know what a relative path is? About the most elementary thing even in straight up computer usage. – Christian Stewart Jul 12 '13 at 18:17
  • I know man, that was just a teaser to add some heat to the discussion :D. Would you please answer the rest of the comment? It would be nice to know, if I'm wrong. – Milad.Nozari Jul 12 '13 at 18:19
  • Yes, that's right. I still think the scope of the question REALLY extends beyond just the title, though. – Christian Stewart Jul 12 '13 at 18:21