My project structure includes css files in a folder named css and jsp files in a folder named jsp, both located inside the WEB-INF folder. I am wondering how to access the css file within a jsp file.
<link rel="stylesheet" href="../css/style.css>
This is how I have defined the path.
Consider using the following code snippet:
<link rel="stylesheet" type="text/css" href="css/style.css" >
in place of
href="../css/style.css
You seem to be missing a right apostrophe. For further assistance, you can refer to BalusC's answer.
I also suggest creating a resources folder at the same level as WEB-INF. Within the resources folder, create a css subfolder and then reference the css file like so:
WEB-INF
resources
--css
--styles.css
--js
--scripts.js
Here is how you can link the css file with your page:
<link rel="stylesheet" type="text/css" href="resources/css/styles.css" />
This method has been effective in my web project with everything functioning correctly.
Utilizing the @import rule offers an alternative method for loading a CSS file:
<style>
@import url('/css/styles.css');
</style>
By using this technique, you can import multiple stylesheets simultaneously, such as:-
@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
In a previous iteration of HTML, in order to link an external CSS file located in a different folder, you needed to include the entire file path in the href attribute like this: href="./CSS/filename.css" However, with the introduction of HTML5, I encountered an unexpected issue when trying to keep my CSS files in a sub-directory. The previous method no longer worked, and I was puzzled by this change. Removing the period at the beginning did not help, nor did eliminating the leading slash (/). Eventually, I discovered that HTML5 only requires the actual name of the CSS file to be included for it to work properly. So, even when the CSS file is placed in a sub-folder, simply using href="filename.css" is sufficient!
If the solutions provided above do not resolve your issue, consider accessing the file by specifying its complete address. It is recommended to include the entire file path instead of using a forward slash.
<link rel="stylesheet" href="C:\delicious\WD4.0 Delicious Recipes Website Start Here\styles.css" >
The simplest method to access the External File is to copy the full address path of the external file into the main file. Ensure that both files are located in the same folder for this to work smoothly.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.example.com/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sign Up Form</title>
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
</html>
When I click a button in my HTML file named `my.html`, I want to redirect the user to `about.html`. However, when I try using `$location.path("\about")` inside the controller, nothing happens and only my current page is displayed without loading `abou ...
I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...
I'm struggling with adjusting the position of my dropdown list. It keeps hiding behind the carousel (slider). When I set the position of the carousel section to absolute, it causes the navbar to become transparent and the images from the carousel show ...
Currently, I am attempting to load a local HTML file from the assets folder into a webview. Even though I can successfully load the HTML file in the webview, there seems to be an issue with the file's reliance on an external .js file for calculations. ...
I am currently in the process of designing my very first website and I have encountered a bit of trouble. I would like to add a page between a navbar and a vertical bar, and I want this page to be displayed when a button on the vertical bar is clicked. You ...
There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...
I'm currently working on developing a double ring radar animation within an Ionic hybrid application. The animation functions perfectly when viewed in a web browser, however, I've encountered issues when attempting to run it on the Nexus mobile ...
As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...
I'm struggling to add attributes to multiple images using a jQuery array. Can anyone provide some assistance? <div id="result"> <img src="Image1" width="300"/> <img src="Image2" width="300"/> <img src="Image3" width="300"/> ...
https://i.sstatic.net/Fh9Bk.jpg Is it possible to position the table using <div> elements? ...
Currently, I am in the process of developing an app with a scrolling sidebar. However, there seems to be some unexpected behavior when using Firefox: the content within the sidebar disappears partially below the top of the div if the mouse is positioned lo ...
I'm in search of a super lightweight solution that can effectively load an external HTML file into a page using only vanilla JavaScript. The external file contains HTML, CSS, and JS. Essentially, I want to create a concise JS snippet that loads a butt ...
Is there a way to randomly change the animation-duration attribute in the following CSS code? I want it to range from 0 to 1. @keyframes blink { 50% { border-color: #ff0000; } } p{ animation-name: blink ; animation-duration: 0.1s ; animatio ...
I am attempting to utilize jQuery in order to change the color of my border line depending on its position within the divs. I have set the position to absolute and it is positioned on both divs. My goal is to make the line on the top div appear as grey, wh ...
I built a Movie Search Page with the OMDB API. My current issue is that the API returns an error when searching for a movie with more than one word because the API URL requires a + key between each word. I am looking for a way to automatically add the + ke ...
As someone who is just learning HTML5 and Ajax, I'm curious to know if it's feasible to use these technologies to create a service that enables users to upload an image in the background while they navigate through different pages on the same sit ...
https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...
I need to create a mechanism where I can move a div by clicking on it, and then click again to stop the div in that position. However, encountering an issue when trying to move the div again as the mousemove event does not get activated. How can this be ...
I'm looking to integrate my C++ program that generates random sentences from a word bank into my personal, low-traffic website. Ideally, visitors could click a button and see a new sentence displayed on the page. What would be the easiest way to accom ...
I have been working on a React component that I want to stick to the bottom of the screen no matter what content is above it. Even if there is minimal content, I want it to remain at the bottom. To achieve this, I added style={{position: 'fixed' ...