Adding CSS files to a JSP page in Spring MVC

This is how my project's structure looks like:

webapp:
       resources:
                 css:
                     test.css WEB-INF:
       pages:
       mvc-dispatcher-servlet.xml
       web.xml

I am working on including a .css file in my jsp.

mvc-dispatcher-servlet.xml:

<bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix">
        <value>/WEB-INF/pages/</value>
    </property>
    <property name="suffix">
        <value>.jsp</value>
    </property>
</bean>
    <mvc:resources mapping="/resources/**" location="resources/css/">       </mvc:resources>
<mvc:annotation-driven />

To include the css in my jsp, I have added this code:

<link href="<c:url value='/resources/css/test.css' />" rel="stylesheet">

However, it seems to not be working as expected. Any assistance would be greatly appreciated.

Answer №1

Give this a shot:

<link href="<c:url value="resources/styles/test.css" />" rel="stylesheet">

Alternatively, you could attempt this instead:

<link href="resources/styles/test.css" rel="stylesheet">

Answer №2

update this :

<mvc:resources mapping="/resources/**" location="resources/css/"> 

with this :

<mvc:resources mapping="/resources/**" location="/resources/">  

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

Execute a JavaScript function when an element loaded via Ajax in a Spring MVC framework triggers the onChange event

I currently have a dropdown list with two values and I am looking to enable or disable four components based on the user's selection. If the user picks the first value, the components should be enabled, otherwise they should be disabled. On the main ...

Change all instances of the asterisk character to a red color on every page using CSS styling

Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...

Switch over to using a for loop

I have a query regarding implementing multiple toggles within a for loop. For instance, I want a toggle menu to appear when clicking on a div. Here is the code snippet: for (var i = 0; i < myObjectString.length; i++) { var obj = JSON.parse(myObjectStr ...

Utilizing CSS for displaying and hiding content based on its unique identifier

Is it possible to show/hide a div using only CSS based on its ID? Showcasing this functionality in jQuery or vanilla JavaScript is straightforward, but can the same effect be achieved with pure CSS? The checkbox hack requires a specific structure to func ...

A way to insert a line break in an HTML document without using the <br> tag is

<div id="unique_1" class="unique" style={{display:"flex"}} > <div class="item1">11</div> <div class="item2">77</div> <div class="item3">22</div&g ...

What is the method for aligning a glyph vertically?

Can anyone help with aligning the glyph vertically to the text? Currently, it seems more like it's attached to the bottom. Here is an example: <a href="#">Zoom</a> a { font-family: 'Open Sans', sans-serif; font-weight: ...

Distinction between style and styleClass on a JSF webpage

I recently began navigating a java code base that utilizes the style and styleClass keywords to customize elements within the jsf page. This particular project is built on jsf 2.2. The 'style' keyword is used for applying html attributes like: ...

The page separator image sinks below the menu

Take a look at the home icon located at the top left corner of this page: If you observe closely, you will notice a small orange line extending below the orange header towards the bottom left of the home button. I have spent hours attempting to adjust it ...

Which CSS preprocessor is the best choice for WordPress: SASS or

After comparing SASS and LESS, I found that SASS is the clear winner in my opinion. Unfortunately, setting up SASS on my server requires ruby, gems, and other tools that I don't have access to. On the other hand, it seems like adding LESS to my proj ...

CSS exclusive - achieving a horizontal scrolling list with all list items in a single row

I am working with a div that has a fixed width. Inside this div, there is an unordered list (ul) containing a random number of list items (li) with varying widths. My project utilizes the Bootstrap framework. Below is an example of the code structure: & ...

Guide to customizing the CSS styles of various components within a Material UI Dialog

Let's take a look at this snippet for creating a Material Dialog in code: <Dialog open={this.props.open} onClose={this.props.closeAtParent} PaperProps={{ style: { minHeight: '75vh', minWidth: '75vw', ...

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

Incorporating Twitter Bootstrap into your Zend Framework 2 Navigation Menu

I have successfully created a menu from my database and the code is functioning perfectly. Now, I'm looking to enhance the menu's style by incorporating Twitter Bootstrap, but I'm encountering some difficulties in doing so. Is there anyone k ...

Implementing CSS and JS for targeted elements or functions in WordPress

I am currently managing a WordPress WooCommerce website My goal is to implement bootstrap CSS and js specifically for a function on my WooCommerce checkout page. The code I have written is as follows: if( current_user_can('administrator')) { fu ...

Tips for managing the transparency level of a container's backdrop using CSS?

Is there a way to adjust the transparency of an image, change the background color of a container, button, or form using CSS? Which specific property would be appropriate for this task? ...

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

Is there a way to show a loading icon during the image change process without using jQuery?

How can I add a loading icon to an image change event without using jQuery? I'm new to the coding world and Stack Overflow community, so please bear with me. I've been searching for a solution to my specific situation but haven't been able ...

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

Use PHP code to echo a clear division after every third result in MySQL

I am currently displaying results in descending order from a MySQL table using a while loop. I have already set up a pagination system that displays 9 records per page. However, I am facing an issue when trying to implement a CSS break every 3 records in ...

Display one div and conceal all others

Currently, I am implementing a toggle effect using fadeIn and fadeOut methods upon clicking a button. The JavaScript function I have created for this purpose is as follows: function showHide(divId){ if (document.getElementById(divID).style.display == ...