Connecting CSS Style Sheet to JSP Page

I'm facing an issue with linking a CSS file located in my WEB-INF folder to a JSP page. In the JSP page, I have specified the location of the CSS file as follows:

<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB-INF/Tabs.css"

However, despite this setup, the CSS file doesn't link properly. Interestingly, when I move the CSS file out of the WEB-INF folder, everything works fine.

This is my first experience working with CSS, so I'm unsure what the problem might be.

Any insights on why this linkage issue is occurring would be greatly appreciated. Thank you for your assistance.

javahtmlcssjsp

Answer №1

The issue at hand is exactly as you've described - it's all about the location of the css file. Any resources stored within the WEB-INF-folder cannot be directly accessed from a web browser; they must be reached through a servlet.

This explains why the css fails to load when visiting your jsp page.

Instead, try organizing them in a more standard structure like /webapp/resources/css/Tabs.css and update the href to 

${pageContext.request.contextPath}/webapp/resources/css/Tabs.css

**Edit **

Note that the folder I mention as "webapp" can have any name, but its location should be the parent folder of the WEB-INF folder.

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

Extracting data from the web using PHP

I'm facing an issue with my code that scrapes data from a website. The current output looks like this: Agriculture Food Apparel I want to only display the first/nth category, for example just "Agriculture". I attempted: echo $sub_title[1].&ap ...

phphtmlarraysweb-scrapingdomdocument

Various Mobile Devices Display Website in Unique Ways

I've been having trouble getting my website to display consistently across different phones and could use some assistance. You can view the site at www.fpphotos.store. I have set overflow-x:auto; for the table containing the images, with CSS styles de ...

htmlcss

The Vue instance methods provide a way to access and manipulate formatted properties

I am looking to implement a method that will generate the appropriate email format to be used as the href value in an anchor tag. This method should return the formatted string in the following format: "mailto:[email protected]". var facultyInformat ...

javascripthtmlvue.js

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

I am currently working on displaying a map within a container. I have successfully been able to display the map by setting its size to a specified number of pixels. However, my goal is to have the height of the map adapt to the size of the container dynami ...

htmlcssleaflet

Error SCRIPT1004: An expected ';' seems to be missing after converting a JSONArray into a JavaScript array

I have a Java JSONArray created as shown below: array = new JSONArray(); for (int i = 0; i < master.size(); i++) { Map option = (Map) master.get(i); String key = (String) option.get("KEY"); String text = key + ": " + (String) option.get(" ...

javaarraysjsonjsp

Double array summation function

It is necessary for me to calculate the total coursePrice from this JSON data source here using AngularJS (javascript). I need to calculate two sums: one for each school and another for all schools combined. I have already displayed all the data in a tabl ...

javascripthtmlangularjs

How to configure a Jenkins job to exclusively run on a specific branch?

Issue My selenium suite takes more than 4 hours to run, and I am looking for a way to reduce this time effectively. My Strategy: 1) To address this issue, I have created 3 branches with different testng.xml files, each running a unique set of tests. 2) ...

javaseleniumjenkinsselenium-webdrivergithub

Activate collapsible navigation icon when clicked on a smaller screen

Seeking assistance as a newcomer to coding. Struggling to implement a responsive navbar icon that changes on small screens when clicked. Utilized a bootstrap navbar but encountering issues where clicking the navbar on a small screen only displays the list ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Instructions for activating a button in the absence of any inputs

I need help enabling a button in angularjs based on whether any of the inputs are filled out. I was successful in disabling a button when only one input is checked, but how can I do this for all inputs affecting one button? This is what I've attempted ...

javascripthtmlangularjs

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

javascriptjqueryhtmlcss

Ways to create adaptive images using Bootstrap 5

On my website, there are some cards that look great on large and medium screens. However, on small screens, the images appear stretched vertically! I am using Bootstrap 5 and here is the code snippet: <div class="col-12 mb- ...

htmlcssbootstrap-5

Is it possible to nest an HTML <span> inside a label tag in a Rails form_for?

Is it possible to nest a span element inside a form_for label tag? I am trying to achieve this in order to style a specific part of the label using CSS, such as making the text red. While it seems like valid HTML based on my research, it is causing some is ...

ruby-on-railscssformshtmlruby-on-rails-3

Solving the Issue of Assigning a Random Background Color to a Dynamically Created Button from a Selection of Colors

Trying to create my own personal website through Kirby CMS has been both challenging and rewarding. One of the features I'm working on is a navigation menu that dynamically adds buttons for new pages added to the site. What I really want is for each b ...

javascriptphphtmlcsskirby

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

I am in the process of upgrading my project from polymer .5 to polymer 1.0. After installing the new version of the polymer library, iron element, and paper element, I encountered the following error: polymer-micro.html:63 Uncaught TypeError: prototype ...

javascripthtmlvisual-studio-2012polymernuget-package

JavaScript encountered a problem when trying to call the inline function

I created a function called controls that adds HTML elements dynamically into the specified div. function controls() { var block = $('#controls'); block.html(''); block.append('<button type="button" onClick="f ...

javascriptjqueryhtml

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

javascripthtmldjango

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Finding the identification of the first element within a nested div using JQuery

Here is the HTML snippet that I am working with: <div id="parent"> <div id="computer"> <div id="items"> <div id="1">hp</div> <div id="2">compaq</div> <div id="3"& ...

javascriptjqueryhtml

The SVG path is not aligned properly with the container's viewbox dimensions

Recently, I came across an icon provided by a plugin I am using called calendar. However, I wanted to enhance my icons set with a new addition - the twitter icon. svg { display: inline-block; height: 16px; width: 16px; margin: 2px 0; ...

htmlcsssvg