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

Sending a PHP variable to a modal using jQuery Ajax

I've encountered an issue with my jQuery ajax script. I'm struggling to pass a variable to the modal despite spending all weekend trying to debug it. Here is the link used to call the modal and the ID I want to pass: echo '<img src="./i ...

javascriptphpjqueryajax

Changing the size of various types of images

Is there a way in JavaScript to automatically resize and fill in a block with fixed width using different images with various dimensions? I came across something similar, but it was in AS2. I'm unsure if it can be translated to JavaScript. var _loc3 ...

javascripthtmlcssimageactionscript-2

When utilizing useEffect in Next.js, an error may occur stating that the window is

It seems like there is a challenge with executing script code server side in next.js 13 when it needs to be executed client side. Currently, I am trying to implement the bulma calendar found at When importing the required library: import PasswordStrengthB ...

javascriptnext.js

Switch up the background image when hovering over it

Could the proportions of the image be contributing to the issue at hand? #menu { background: black; width: 100%; height: 45px; } #menu ul { text-decoration: none; list-style-type: none; } #menu li { text-decoration: none; display: inline; font-size: ...

htmlcsslist

Can you verify the standard behavior when importing index.js using create-react-app?

I'm trying to wrap my head around why, when using create react app, if a folder contains an index.js file and you want to import it, you only need to specify the folder name. I've been wondering where this default behavior is configured to autom ...

javascriptreactjswebpackimportcreate-react-app

Strange behavior is observed when using ng-view inside ng-controller, especially when refreshing the

Here is the code I am working with: <body ng-controller="CoreCtrl"> <div ng-cloak> <!-- NavBar --> <div ng-include="'/app/core/navbar.html'"></div> <!-- Main content --> <div class="con ...

javascripthtmlangularjs

Display an "add to cart" button and a discount image when hovering over

Currently, I am in the process of developing an Online Shopping website using PHP. To enhance the design of my website, I have implemented bootstrap. One specific query I have is how to display an 'add to cart' button and a discount image when a ...

javascriptphpcss

Guide to displaying a custom HTML tag

In this example: <?php $html='<p style="color:#eee;"> Test content 1. </p> <p dir="LTR" style="color:#f00;"> <span>Test content 2.</span> </p> <p style="color:#000;"> Test content 3. </p>' ?> ...

phphtml

What is the best way to send {...rest} properties to a text field in react material?

When using a material textfield inside a wrapper component and passing the remaining props as {...otherprops} in a JavaScript file, everything works fine. However, when attempting to do the same in TypeScript, an error occurs. const TextFieldWrapper = (pro ...

javascriptreactjstypescriptmaterial-ui

Tips for utilizing CSS to position a semi-circle in the middle of an image

Can CSS create a half circle effect on any image? I want to achieve a half circle effect in an image using CSS. Is this possible or not? ...

css

Updating React state via child components

Encountering a strange issue while working on a project, I managed to replicate it in this jsfiddle. The parent component's state seems to be affected when the child component updates its state. Any insights on what might be causing this? Here is the ...

javascriptreactjs

Identify the name in the list by highlighting it when its content matches the text in a specific div id

I have an unordered list structured like this: <ul> <li id="projectrow_364"> <span>Forest</span> </li> <li id="projectrow_365"> <span>Life</span> ...

jquerycss

The issue with executing event.keyCode == 13 in Firefox remains unresolved

I've implemented a function that sends comments only when the "enter" key is pressed, but not when it's combined with the "shift" key: $(msg).keypress(function (e) { if (event.keyCode == 13 && event.shiftKey) { event.stopProp ...

javascriptjqueryevents

The Firebase JQuery .on method is incrementally updating individual values in an array instead of updating them all simultaneously

I am trying to update the values of the orders placed by users on the Corporate's page without a refresh. I have implemented the jQuery .on method for this purpose. However, the values are being returned one by one from the array created for the order ...

javascripthtmlfirebasefirebase-realtime-database

What is the importance of using mb_convert_encoding in order to display the characters correctly?

My website and MySQL database are both set to use UTF-8 encoding. An issue I am encountering is that when retrieving text from the MySQL database to display on the website, I need to utilize the PHP function mb_convert_encoding(@db_field,'utf-8' ...

phphtmlmysqlencodingmb-convert-encoding

Exploring TypeScript: Optional Sub-Properties

I've been exploring ways to create a type-alias with properties like "answer" that I came across in this post by another user (Typescript interface optional properties depending on other property). Here's an example: type Sample = { key1: true, ...

javascripttypescript

Process only the $_POST variables that have a specific string prefix

I am currently working on a form that will be handling numerous elements sent via $_POST. A significant portion of these elements, which are too numerous to list individually, have a consistent naming pattern: $_POST['city_1'] $_POST['city_ ...

phphtmlarraysformspost

mysterious supplier factoryprovider <- factory <- angular js controller

I'm encountering an issue with injecting dependencies from a service to a controller. Despite adding it, I keep receiving the following error: Unknown provider: websiteFactoryProvider <- websiteFactory <- listCtrl My main goal is to display ...

javascriptangularjs

Retrieve a data value from a JSON object by checking if the ID exists within a nested object

I am facing the challenge of navigating through a JSON object where child objects contain IDs that need to be matched with parent properties. The JSON structure looks like this: { id: 1, map: "test", parameter_definitions: [{ID: 1, pa ...

javascriptjson

Getting the response data from an XMLHttpRequest - Full guide with screenshots

Currently, I am working with autocomplete jQueryUI and have this code snippet: .autocomplete({ source: function( request, response ) { var results = $.getJSON( url, { term: extractLast( request.term ) }, response ); console.log(results); ...

javascriptjqueryajaxxmlhttprequestresponse