JSP doesn't see CSS

Question

I'm trying to make a simple Servlets + JSP project. It's structure looks like this:

enter image description here

index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>App</title>
  <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<h1>Header</h1>
</body>
</html>

style.css:

body {
    background-color: beige;
}

web.xml:

<web-app>
    <display-name>App</display-name>

    <servlet>
        <servlet-name>IndexServlet</servlet-name>
        <servlet-class>com.example.web.IndexServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>IndexServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

</web-app>

When I start the application and open it in the browser I see the index.jsp page but it's background is white so the css isn't working there. What could be the problem?

where is your spec in web.xml? because the default root is in webapp/index.jsp not webapp/pages/index.jsp — Sai, Mar 12 '15 at 14:04
Tried to add this into web.xml, nothing changed.This page itself opens in the browser, the only problem is that css doesn't work. — Green Fireman, Mar 12 '15 at 14:08
remove the ".." in "../css" that way you are telling the server that the css folder is in the root ( which in your case it is ) — Sai, Mar 12 '15 at 14:09
@LuiggiMendoza - i knew that the css file was not loading probably because the path for the css file was messing up with the way OP had set up the app. I was just merely trying to find how his app was set up to handle homepage. If OP had opened the browser probably he/she would have noticed in the "networks" tab console that the css file request was not going through — Sai, Mar 12 '15 at 14:41
@Sai or just by looking at the source code of the HTML rendered in the browser — Luiggi Mendoza, Mar 12 '15 at 14:42

score 5 · Accepted Answer · answered Mar 12 '15 at 14:36

There are two problems in your app:

In JSP, you should use ${pageContext.request.contextPath} to append the base path for your URLs. With this, you can be sure you will use absolute path instead of relative path for your URLs. So, this:
```
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
```
Will be
```
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css"/>
```
This can also be accomplished by using <c:url> from JSTL:
```
<link rel="stylesheet" type="text/css" href="<c:url value='/css/style.css' />"/>
```
Your servlet is mapping to every request made in your app. Note that this includes simple requests for resources like this CSS file. If you're not handling these requests successfully, you may get an error response or an empty response or whatever, depends on how you handle the request for CSS files in the servlet. I recommend you to change the URL pattern for your servlet to map to specific paths instead.
```
<servlet-mapping>
    <servlet-name>IndexServlet</servlet-name>
    <url-pattern>/index</url-pattern>
</servlet-mapping>
```

JSP doesn't see CSS

1 Answers1

Linked