I've created css files that I would like to use. However, I can't seem to get my html and jsp files to pick them up. My project hierarchy is as follows:
my_project
`-- src
`-- main
|-- resources
| `-- META-INF
| `-- resources
| |-- index2.css
| `-- index.html
`-- webapp
`-- WEB-INF
|-- css
| `-- index.css
`-- jsp
`-- DataViews
`-- Data.jsp
My index.html can be reduced to the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="WEB-INF/css/index.css" />
<link rel="stylesheet" type="text/css" href="/src/main/resources/META-INF/resources/index2.css" />
<link rel="stylesheet" type="text/css" href="./index2.css" />
<link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>
<div style="text-align: center">
<img src="logo.png" alt="logo">
</div>
</body>
</html>
My index2.css:
img {
width: 533;
height: 230;
}
My Data.jsp can be reduced to the following:
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="WEB-INF/css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
</head>
<body>
<table>
<tr>
<th>Available Containers:</th>
<th>File Count</th>
</tr>
<c:forEach items="${model.containers}" var="container">
<tr>
<td>${container.getCount()}</td>
</tr>
</c:forEach>
</table>
</body>
</html>
My index.css:
img {
max-width: 533px;
max-height: 230px;
}
tr:nth-child(even){background-color: #f2f2f2}
th {
background-color: #4CAF50;
color: white;
}
tr:hover {background-color: #f5f5f5;}
As you can see, I've tried a bunch of ways of reaching my css files with no luck. Nothing seems to change on the UI. What am I doing wrong?