Search code examples
cssjsptomcatservlets

Can't use external css styling with jsp

I'm just trying to learn servlets and using JSP files. I would like to do the format of the start page (/login page) with external css file but I didn't manage to do that. It works with internal css put in the head but that is not too nice.

I run the web application with docker, this is the Dockerfile of it:

FROM maven:3.9.7-eclipse-temurin-11 AS builder

WORKDIR /app

COPY . /app

RUN mvn clean package

FROM tomcat:9.0.89-jre11-temurin-jammy

COPY --from=builder /app/target/*.war $CATALINA_HOME/webapps/ROOT.war

EXPOSE 8080

CMD ["catalina.sh", "run"]

This is the structure of my files:

folder and file structure

It is the beginning part of my index.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <title>Login</title>
    <base href="${pageContext.request.contextPath}">
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

I tried many things, many paths but my css is not applied yet. For example these:

Unable to Load external CSS in JSP page

CSS not working in JSP

JSP doesn't see CSS

Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP

There is a chance I just didn't notice something in these but I tried to read them carefully.

If I can provide anything that could bring the solution closer, please let me know.

Thank you very much for your help in advance.

Solution

  • The <base> tag is not needed, you can remove it.

    You can use <c:url> tag to build the correct url to the css file. Also don't mess static content with JSP. In the web application root folder create a subfolder css and add .css file there. Then if you added correct JSTL library files to the lib folder, you can use

    <link rel="stylesheet" type="text/css" href="<c:url value='/css/style.css'/>">

    Also, make sure you have a mapping of .css files to Tomcat's default servlet which is used for serving a static content. In web.xml should be

    <servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>*.css</url-pattern>
</servlet-mapping>