Incorporating a CSS file within a JSP page

I've been struggling to get my '.jsp' file to utilize a '.css' file that I created. Initially, I stored the '.css' file in the 'WEB-INF' folder but discovered that this folder is not accessible publicly. So, I moved it outside to the 'webapp' folder, but I am still facing issues.

The 'index.jsp' and 'index.css' files are located in the same directory:

'HelloWord/src/main/webapp'

My '/jsp' file links the '.css' like so:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="${pageContext.request.contextPath}/index.css" type="text/css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>MM Vehicle Registration</title>
</head>

Upon trying to run, I encounter the following error:

Nov 28, 2015 3:42:00 PM org.springframework.web.servlet.DispatcherServlet noHandlerFound
WARNING: No mapping found for HTTP request with URI [/HelloWorld/index.css] in DispatcherServlet with name 'dispatcher'

Even though the file is declared in a '.jsp' that is displaying correctly, why do I keep getting this error?

javahtmlcssjsp

Answer №1

Spring has the ability to manage all URLs within your application. To ensure proper handling of static resources, include <mvc:resources> in your configuration file and consider storing client resources in the WEB-INF/resources/ directory. For more information on how to handle static content in Spring MVC, check out this helpful guide.

Answer №2

Consider replacing the following:

'${pageContext.request.contextPath}/index.css'

with:

'/index.css'.

Are both index.css and index.jsp located in the root folder of the webapp? If so, then the structure seems to be correct. I recommend checking your web.xml file for any potential issues. Ensure that your servlet mapping is configured correctly, similar to the following:

<servlet-mapping>
  <servlet>dispatcher</servlet>
  <url-pattern>/*</url-pattern>
</servlet-mapping>

You could also try using a different extension (e.g., .do) for your controller calls and update the servlet mapping accordingly:

<servlet-mapping>
  <servlet>dispatcher</servlet>
  <url-pattern>*.do</url-pattern>
 </servlet-mapping>

After making these changes, attempt to access /helloworld/index.css. If successful, revert '/index.css' back to '${pageContext.request.contextPath}/index.css'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Question about transparency - HTML, CSS, and Bootstrap

I adjusted the opacity of the bootstrap card to 0.8, but now I want the table to be opaque while the rest of the card remains translucent. How can I achieve this effect? I attempted to add the style opacity : 1 to the table, but it didn't have the des ...

htmlcsstwitter-bootstrapbootstrap-4

Place one flex item in the center and align another item to the bottom

I am attempting to center one flex item both vertically and horizontally. At the same time, I want some text to remain fixed at the bottom of the flex container. When I use margin-top:auto on the text, it just moves the inner box to the top. Any suggesti ...

htmlcssflexbox

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

I am currently working on a project where I need to dynamically create grid blocks and change the color of each block. I have been using jQuery and ES6 for this task, but I am facing an issue with dynamically changing the colors. Below is the snippet of m ...

javascriptjquerycssecmascript-6

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...

javascripthtmlcssstring

Problem with CSS dotted borders appearing as dashed in Chrome when applied to adjacent columns in a table

After testing the code on both Chrome and Firefox browsers, I noticed that they display the border differently. In Chrome, there is a dash in between adjacent cells while in Firefox, there are no dashes rendering. Can anyone suggest a solution to fix thi ...

htmlcssfirefoxgoogle-chromeborder

Executing JavaScript code does not execute CSS code

Having some trouble with my Javascript and CSS. The script is functioning well, but when I use the filtering function, the CSS stops working and only the filtered results are displayed on the HTML page. Looking for advice on how to fix the Javascript. & ...

javascripthtmlcss

Incorporating shadow effects along the right border of alternating table cells: a step-by-step guide

How can I set a proper shadow border for alternating td elements in a table? I've been experimenting with the code below. While the shadow effects work, they are getting cut off at each td junction. Can anyone provide assistance? Here is my table: ...

htmlstylesshadowcss

Tips for showing both label and value on a pie slice in Apex charts

I am currently utilizing apex chart within an angular application to showcase charts. I am specifically focusing on a pie chart and aiming to customize it by displaying labels on the values within each slice of the pie, similar to what is shown in the atta ...

javascriptjquerycssangularapexcharts

Implementing automatic line breaks in Bootstrap

When setting the "overflow scroll able" option, I want it to only allow scrolling in the y direction and if x content overflows, a line break should occur. I tried applying 'white-space', but it didn't work as expected. <ul class="s ...

javascriptjqueryhtmlcssbootstrap-4

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

What is the best way to locate an element in the HTML content that contains the class 'sponsored-post'?

This code snippet is flawed as it assigns 'none' to the variable article, even though the variable articles contains all the listing results. articles = soup.select('.listingResult') for article in articles: # <div class=&qu ...

pythonhtmlbeautifulsoup

What iOS Printing and HTML formatter should you use and what level of sophistication is best?

Currently, I have successfully created an iOS 5 application that sends a job to the print queue. The functionality works fine and utilizes the UIMarkupTextPrintFormatter to generate the document in HTML format. At this point, I am using a simple HTML str ...

htmlobjective-ciosprintingxcode4

Guide to easily printing a page in Angular 4 using TypeScript

When using my web app, there are certain pages where I need to print only a specific component without including the sidebar. I have written the following TypeScript code to achieve this: print() { window.print(); } The relevant HTML code begins with: & ...

htmlangulartypescript

Navigate to a specified div using JavaScript

I'm having an issue with my navigation bar not scrolling to the designated div. Despite looking at other examples, I can't seem to find a solution <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> ...

javascriptjqueryhtmlcss

What steps can be taken to stop 'type-hacking'?

Imagine owning a popular social media platform and wanting to integrate an iframe for user signups through third-party sites, similar to Facebook's 'like this' iframes. However, you are concerned about the security risks associated with ifra ...

javascripthtmlsecurityweb

Making an asynchronous call from Index.html to PHP Script

I am currently working on implementing an AJAX call to my PHP Script. While I can successfully echo the results from my data.php file, I am now facing a challenge regarding how to initiate the call from index.html in order to retrieve the table results s ...

javascriptphphtmlajax

How to create a fixed header navigation in SquareSpace

If you take a look at my Squarespace website using the Adirondack theme over here: The issue I'm facing is that whenever I scroll on either desktop or phone, the top header area shrinks. Currently, the navigation remains fixed on the screen and the l ...

htmlcss

What is the best way to adjust the background color of Material UI's theme based on different screen sizes?

Having trouble replacing hard-coded CSS breakpoints with Material UI theme settings. @media screen and (min-width: 0px) and (max-width: 400px) { body { background-color: red; } } @media screen and (min-width: 401px) and (max-width: 599px) { body { ...

cssreactjsmaterial-ui

Using customized CSS code may not always be compatible with Bootstrap 5

One scenario I encountered was my attempt to change the background color of the body using style.css, but unfortunately, the code wasn't effective. Below is my reference to Bootstrap 5 and custom CSS: <link href="https://cdn.jsdelivr.net/npm/& ...

htmlcssbootstrap-5

`CSS alignment problems with multiple images`

Recently, I delved into the world of CSS and HTML. I created an application with pages designed using these languages. Here are the images representing my pages: and the second one is the user page, which serves as the home page. Below is a snippet of my ...

htmlcss