css Question posted in
Some basic documentation can be found here.

Css shows up as html

Hi I have a basic webapp with an index.jsp and I’m trying to apply some css, but it seems like the browser interprets my css page as html and i just dont know why. this is the jsp.
I tried opening the web.xml in tomcat config and the mime mapping was also fine. i created a folder under webapp as css which is where my css file is sitting. Everything was created with netbeans ide. The app itself is deployed on Apache Tomcat 11.0.0 .

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@page import="java.util.List"%>
<%@page import="models.YearlyInstructorStatistic"%>
<html>
<head>
    <title>Skischool Instructor Statistics</title>
    <link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>
    <body>
        <h1>Skischool Instructor Statistics</h1>

        <form action="SkiSchoolReportWebApp" method="get">
            <label for="listSelection">Choose an instructor by Id number (0-39)!</label>
            <input type="number" id="listSelection" name="listSelection" min="0" max="39" required>
            <input type="submit" value="Submit">
        </form>

        <table>
            <c:choose>
                <c:when test="${not empty statistics}">
                    <tr>
                        <th colspan="4">${statistics[0].lastName} ${statistics[0].firstName}</th>
                    </tr>
                </c:when>
                <c:otherwise>
                    <tr>
                        <th colspan="4">Name not found!</th>
                    </tr>
                </c:otherwise>
            </c:choose>
            <tr>
                <th>Season</th>
                <th>Lesson Count</th>
                <th>Hours Worked</th>
                <th>Average Student Age</th>
            </tr>
            <c:choose>
                <c:when test="${not empty statistics}">
                    <c:forEach var="statistic" items="${statistics}">
                        <tr>
                            <td>${statistic.season}</td>
                            <td>${statistic.lessonCount}</td>
                            <td>${statistic.hoursWorked}</td>
                            <td>${statistic.averageStudentAge}</td>
                        </tr>
                    </c:forEach>
                </c:when>
                <c:otherwise>
                    <tr>
                        <td colspan="4">No statistics available for this instructor!</td>
                    </tr>
                </c:otherwise>
            </c:choose> 
    </body>
</html>

css:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
}

table{
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
}

th, td{
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #006699;
    color: white;
    font-weight: bold;
}

tr:nth-child(even){
    background-color: #f9f9f9;
}

tr:hover{
    background-color: #e6f7ff;
}

th[colspan="4"]{
    font-size: 1.2em;
    padding: 15px;
    background-color: #004d66;
    color: white;
}

The css is not being applied to this page and when i open the dev tools in the browser i can see the css being loaded but its type is html, it doesnt show up as css like it should, can you help what might casue this issue, what am i doing wrong?

Tags:

2

Answers


  1. 0

    You seem to be missing a selector in the first line of the CSS file. This may be what you were aiming for:

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    Login or Signup to reply.
  2. 0

    This sounds like a classic MIME type mismatch. If the browser is treating your CSS as HTML, it’s likely Tomcat isn’t recognizing it as CSS.

    Double check your CSS path is correct (/css/mainstyle.css).

    Clear cache, redeploy and test.

    That should do it!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search