Unable to retrieve CSS file on JSP page

My challenge right now is linking CSS with the JSP page. I have attempted it like this:

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

In my spring-servlet.xml file, I added:

<mvc:resources location="/WEB-INF/resources/" mapping="/resources/**"/>

Although I followed these steps, when I include these codes, I encounter a 404 not found error. However, if I remove them, the error disappears.

The goal is to properly connect the CSS file in the JSP.

Normally, I link CSS files like this
Could someone please assist me with this issue?
cssjsp

Answer №1

Illustrative example:

<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>

<html>
   <head>
   </head>

   <body>
      <a href = "<c:url value = "/jsp/home.htm"/>">CLICK HERE</a>
   </body>
</html>

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

Experiencing difficulties connecting external CSS files

After rekindling my interest in web design, I decided to test my skills and see how much I remembered. However, I encountered an issue while trying to link my external CSS to the HTML document. Even after making the connection, I went back to the CSS docum ...

htmlcss

Implementing alternating row shades using Bootstrap

I am attempting to apply shading to every other row in a table. Here is the code snippet: dt:nth-child(4n+1) ,dt:nth-child(4n+1) +dd{ background-color:silver; } <div class="col-sm-2 tabularData"> <dl class="dl-horizontal"> <dt> ...

csstwitter-bootstrap

Creating a countdown timer for a specific date and time using web technologies

I'm looking to create a timer countdown that is set to a specific date and time, such as June 1st at midnight. The code should display the remaining time until that date or time. ...

c#javascriptjqueryasp.netcss

Circular arrangement using D3 Circle Pack Layout in a horizontal orientation

I'm currently experimenting with creating a wordcloud using the D3 pack layout in a horizontal format. Instead of restricting the width, I am limiting the height for my layout. The pack layout automatically arranges the circles with the largest one ...

javascriptcssd3.jschartsbubble-chart

Show a persistent header once you scroll past a certain point using Bootstrap

Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing di ...

javascripthtmlcsstwitter-bootstrap

Adjusting the placement of a dropdown menu while scrolling within the container element using CSS

Is there a way to keep the submenu aligned under the button even when scrolling within the container div? Currently, it stays in the middle of the page. div.container { height: 200px; width: 400px; border: 1px solid black; overflow-y: scroll; ...

htmlcsscss-position

Stretching the limits: Combining and expanding your Styled Components theme

I am facing a situation where I have a component library built using Styled Components that has its own theme settings which are not meant to be overridden. Now, I need to incorporate this component library into another project that also uses Style Compone ...

javascriptcssreactjsstyled-components

Steps to display a specific div section upon selecting a dropdown option and clicking the submit button using jQuery

I'm having an issue displaying a specific div section when selecting an option from a dropdown menu. I've written the code below, but it doesn't seem to be working. Can anyone please assist me with this? My actual requirement is that I only ...

javascripthtmljquerycssbootstrap-4

What's the point of specifying position relative if it's not even needed?

Why do I see many sites setting the position: relative; in block elements when they do not use position in the inner elements? Is there any other reason to set the position relative? For example: <div class="parent"> <div class="parent__contai ...

htmlcssposition

design and construct a three-dimensional shelving unit

After much searching and failed attempts, I am determined to create a stationary cube-shaped bookcase using CSS. Can anyone offer some guidance on how I can achieve this? I have included an image of the design I want to replicate. Thank you .scene { ...

htmlcss

Ways to create a menu that appears as fixed-top without moving along with the scroll

When I use the fixed-top class on my nav bar, it stays on top of the header as shown in the image. However, when I scroll down, the menu also scrolls down. Is there a way to make the navigation look the same but not follow when scrolling? I want to achieve ...

htmlcssbootstrap-4

Determine the combined width of each child element and divide it by two

I am working on a div that has multiple children inside. To achieve a horizontal layout, I need to set a width on the parent div so that the content flows from left to right. Instead of having all items in one row, I want them to be split into two rows. Th ...

javascriptjquerycsslayoutwidth

Border-Encased Navigation Menus in Bootstrap 4

I am a beginner with Bootstrap 4 and I'm curious to know if there is a way in Bootstrap 4 to create navbar menus surrounded by borders similar to the design shown in this image. Thank you in advance! ...

htmlcsssasstwitter-bootstrap-4bootstrap-4

Activate the Chrome Extension that allows you to open a link in a new tab with just a middle click or regular click, without closing the popup

When I try to click a link in my extension popup and open it in a new tab using "middle click -> open link in a new tab", the popup closes. Is there a way to keep the popup open so I can click on multiple links from my extension without interruption? A ...

javascriptjquerycssgoogle-chromegoogle-chrome-extension

Is it possible to incorporate button classes from the <a> tag into a JQuery fade in/fade out function?

My jQuery image thumb Slider features thumb buttons that link to different div elements. When a user clicks on a thumb button, I want the associated div to smoothly fade in, replacing the previous one. The goal is to have a seamless transition between the ...

javascriptjqueryhtmlcss

Tips on Including Static Header and Footer in Multiple HTML Pages

What is the best way to reuse a header and footer on multiple HTML pages without repeating code? I have 5 HTML pages that all need to include the same header and footer elements. How can I efficiently reuse these components across all pages? ...

javascriptjquerycsshtml

Is there a way to make a button on a single div only affect that specific div

I have a PHP query that echoes a div for each row in the table. I want the div to slide up and then, when the user clicks the "read more" button, the div slides down. However, since it is echoed in a loop, all the divs have the same IDs and classes. I wo ...

javascriptjqueryhtmlcss

Place an IconButton component next to each Material UI TableRow

I am trying to include an icon next to the material UI table row component. Similar to the hint icon shown in the screenshot below Here is my attempt so far, but it's not functioning as expected: Check out the code on CodeSandbox https://i.stack.i ...

javascripthtmlcssreactjsmaterial-ui

What steps can be taken to stop images from overflowing a flex-grow-1 item?

https://i.sstatic.net/1Qgec.pngHello, I'm facing an issue with my image. I am dealing with 3 sections: Main Content Image and other components (main section) Button Currently, I need to ensure that the image height is set to a maximum of 100% of the ...

htmlcssbootstrap-4

Ways to create a responsive header image on a website

I recently incorporated a header image on my website using the following code: #header_area { background: url('my_header_image.com'); background-repeat: no-repeat; background-position: top center; } Although my website is responsive ...

cssresponsive-design