In eclipse dynamic web project, how to link css to jsp file in webcontent folder

Question

In Eclipse, I created a Dynamic Web Project and a JSP file under WebContent folder. I also created a CSS file under the WebContent folder. Then I use <link rel="stylesheet" type="text/css" href="XXX.css"> in the JSP to link to the CSS file but when I run on web server (Tomcat) the CSS didn't apply. Can someone tell me why?

Solution 1

You must put your web project name before the address path of your css file

Example:

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

or in more dynamic way:

<link rel="stylesheet" href="${pageContext.request.contextPath}/XXX.css" />

Have fun :)

Solution 2

You can use: With style.css file in WEB-INF/jsp folder

<style type="text/css">
  <%@include file="css/style.css" %>
</style>

NOTE

This however copies the entire source of the CSS file into the HTML output of the JSP page. In other words, this is a server-side include, not a client-side resource reference. So you effectively miss the advantage that the browser can cache static resources and this way you end up with a bandwidth waste because the very same CSS file is embedded in every single page. In other words, a bad idea in terms of performance and efficiency.

as @BalusC described in comment! you want to test your style.css file anyway, this is a solution.

Comments

[BalusC]

This however copies the entire source of the CSS file into the HTML output of the JSP page. In other words, this is a server-side include, not a client-side resource reference. So you effectively miss the advantage that the browser can cache static resources and this way you end up with a bandwidth waste because the very same CSS file is embedded in every single page. In other words, a bad idea in terms of performance and efficiency.