What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories:

html_pages/
   |
   ----> landin_page.html

html_pages/details
   |
   ----> index1.html

html_pages/more_details
   |
   ----> index2.html

html_pages/css
   |
   ----> master_page.css

I am trying to link the master_page.css file in the header of all HTML pages.

What is the best way to reference it?

I initially attempted to use an absolute path, but it resulted in a 404 error.

<link rel="stylesheet" href="/html_pages/css/master_page.css">
javascripthtmlcss

Answer №1

To apply the styles from a CSS file to all pages within the same directory, include the following code snippet in the <head> section of each page:

<link rel="stylesheet" href="master_page.css" type="text/css">

Answer №2

To reference the full path, it is recommended to use ${pageContext.request.contextPath}.

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/delta_samples.css">

Simply adding ${pageContext.request.contextPath} will do the job.

While using "../" may also work, it is not advised as it may lead to code breaking at times.

Answer №3

To signify the parent directory, remember to employ the ..:

<link rel="stylesheet" href="../css/delta_samples.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

Error encountered: No matching overload found for MUI styled TypeScript

I am encountering an issue: No overload matches this call. Looking for a solution to fix this problem. I am attempting to design a customized button. While I have successfully created the button, I am facing the aforementioned error. Below is my code ...

javascriptreactjstypescriptreact-hooksmaterial-ui

When using NodeJS with expressJS, remember that req.body can only retrieve one variable at a

I'm having trouble with my login and signup pages. The login page is working correctly, but the signup page is only transferring the password for some reason. App.JS: var express = require("express"); var app = express(); var bodyParser = require("bo ...

javascriptnode.jsexpress

The existence of useRef.current is conditional upon its scope, and it may be null in certain

I'm currently working on drawing an image on a canvas using React and Fabric.js. Check out the demo here. In the provided demo, when you click the "Draw image" button, you may notice that the image is not immediately drawn on the canvas as expected. ...

javascriptreactjstypescriptcanvasfabricjs

What could be causing my redux-observable to not be triggered as expected?

Currently diving into the world of RxJS and Redux Observables within Redux, attempting to grasp the concepts by implementing a basic fetch example. This is how I've configured my store: import { applyMiddleware, createStore } from 'redux' ...

javascriptreactjsreduxrxjsrxjs-observables

Unable to set the height of WebDataRocks as a percentage

I've recently started using WebDataRocks and I'm having trouble getting the height to fill the window. Despite what the documentation says (), which states, "The height of the pivot table in pixels or percent (500 by default)". The code snippet ...

csspivotwebdatarocks

Is Aurelia-Fetch reliant on whatwg-fetch as a dependency in its codebase?

I am currently in the process of updating my Aurelia project from a beta version to the March version. One of the issues I encountered is: Cannot locate name 'Request'. Searching online led me to this problem on GitHub: https://github.com/au ...

javascripttypescriptnpmaureliafetch-api

Organize JSON data based on the timestamp

What is the most effective method for sorting them by timestamp using jquery or plain JavaScript? [{"userName":"sdfs","conversation":"jlkdsjflsf","timestamp":"2013-10-29T15:30:14.840Z"},{"userName":"sdfs","conversation":"\ndslfkjdslkfds","timestamp" ...

javascriptjqueryjson

How to easily align an image and blockquote vertically in CSS with automatic width for the blockquote

I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both ele ...

htmlcss

"How to eliminate the hash symbol from a URL using react-router-dom in a React.js

Recently started learning react.js and running into an issue with the URL structure while using react-router-dom v6 in my project. Specifically, I'm finding a problem with the # symbol in the URL. For instance: {url}/#/dashboard I would like it to b ...

javascriptreactjs

In what way does the map assign the new value in this scenario?

I have an array named this.list and the goal is to iterate over its items and assign new values to them: this.list = this.list.map(item => { if (item.id === target.id) { item.dataX = parseFloat(target.getAttribute('data-x')) item.da ...

javascript

What methods can be used to ensure a required minimum delay time between function executions?

For my node function, I am aiming for a specific execution delay of around 5 seconds. The minimum delay needs to be implemented within the function itself, not externally, so external users are unaware of the delay. Therefore, I cannot rely on modules l ...

javascriptnode.jsdelay

Looking to include a new item into an array with the help of AngularJS

Having just started with angularJS, I am facing difficulties in adding an object from a form to an array. When I click on "Add New Product", it triggers the "newItemModal". I enter the new product information but the submit button doesn't seem to work ...

javascriptangularjsarraysfrontendjavascript-objects

What is the best method for inserting a 'Placeholder' in an Angular datePicker?

Looking for assistance with placing placeholder text inside an Angular datePicker, specifically wanting to display 'From' and 'To' labels within the datePicker. datePicker I am a novice when it comes to Angular development - can someon ...

javascriptangular

How can I position a Button at the center of my Grid item using Material UI?

In my React 16.13.0 application, I am utilizing Material UI's Grid and trying to center the content of a button in the middle of a row. Here is what I have tried: center: { alignItems: "center", width: "100%", }, halfRow: { width: "5 ...

cssreactjsmaterial-uialignmentcenter

CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually. ...

jquerycssanimation

Navbar in bootstrap appears to be flashing when it is in its expanded

Example Link On smaller screens, the bootstrap navbar menu does not collapse by default when clicking on a menu item. To fix this issue, I added attributes data-toggle="collapse" and data-target="#navbar-collapse" to each menu item so that the menu will ...

javascriptjquerycsstwitter-bootstrapnavbar

What is the best way to switch the CSS class of a single element with a click in Angular 2

When I receive data from an API, I am showcasing specific items for female and male age groups on a webpage using the code snippet below: <ng-container *ngFor="let event of day.availableEvents"> {{ event.name }} <br> <n ...

javascriptangulartypescript

issues with the handler not functioning properly in html and javascript

<form method="post" action="."> <label class="input-label">Enter Your First Name</label><input field="first_name" class="input-edit" maxlength="30" type="text" value="{{ user.first_name }}" /> <label class="i ...

javascripthtml

Discover the child of the delegated event div using jQuery

Can you assist me in resolving this issue? My HTML structure appears as follows: <div id="main-randompart"> <!--Inserted into the DOM during runtime--> <div class="close"> X </div> <img src="somesrc..."> ...

jqueryhtml

What is the best way to direct users to an input field within a dynatree title?

I am currently utilizing Dynatree to display a tree view, and my goal is to focus on an input field within the dynatree title element. However, I am encountering an issue where the focus is being lost. My code attempts to address this problem but unfortun ...

javascriptjqueryhtmldynatreejquery-dynatree