What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

In my CS 205 class project, I am tasked with creating a website. To accomplish this, I used Notepad++ for the HTML files and Notepad for the CSS files. The site consists of an index.html page along with other content pages, each designed separately in Notepad++ with its own CSS file.

The challenge I am facing involves a main CSS file named "global.css" that is located in the "main css" folder with the index.html file. While linking the global.css file to the index.html page works fine, it does not work when trying to link it to other pages stored in a separate "pages" folder. How can I resolve this issue?

<head>
    <meta charset="utf-8">
    <title>Games</title>
    <link rel="stylesheet" href="main css\global.css">
    <link rel="stylesheet" href="game.css">
</head>
csshtml

Answer №1

To navigate to a parent folder, simply use "../" in your file path. Remember, avoid using spaces in folder names and opt for underscores instead.

For instance, if your inner pages are located in a separate folder, the stylesheet URL would look something like this (make sure to remove any spaces from the folder names):

<link rel="stylesheet" href="../main_css/global.css">

Answer №2

You have the option to modify your HTML file using PHP and connect them through your index page. For instance, if you have an index file where all your CSS links are listed like so:

<link rel="stylesheet" type="text/css" href="cssFolder/global.css" />
<link rel="stylesheet" type="text/css" href="cssFolder/game.css" />

You can simply link all your files with your index as shown below:

<li><a href="index.php?page=htmlFile">htmlFile</a></li>
<li><a href="index.php?page=anotherFile">anotherFile</a></li>

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

Is it possible to dynamically add an id or class to an element using document.createElement in JavaScript?

As a beginner in the world of JavaScript, I understand that the code structure I have used here may not be ideal for real-world applications. However, I am using it to practice my understanding of for loops and fetching JSON data. My main query is whether ...

javascripthtml

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

javascriptjqueryhtmlimage-uploading

What is the technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 70 ...

javascripthtmlcss

Including a Script Tag in an Angular 2 Application with a Source Attribute retrieved from a Web API Request

Situation: Within my Angular 2+ application, I am utilizing a web API to retrieve URLs for script tags created by a function called loadScript during the AfterViewInit lifecycle hook. The web API is providing the expected JsonResult data, which I have suc ...

htmlangularasp.net-web-api

Make sure the division remains fixed even when the window is resized

Having a fixed position and bottom set to 0, I want my div to display at the bottom of the window. The issue arises when the window is resized, causing the div to move up and into other elements. For instance, when opening the console box in Chrome, the f ...

javascriptjqueryhtmlcss

Ways to create a group label to modify various textboxes when a click event occurs

Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...

javascriptjqueryhtml

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

htmlcss

Tips for ensuring consistent dimensions on a bootstrap card

Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the ...

htmlcssbootstrap-5

Identifying CSS when the height of the browser is smaller than the height of the device

On my page, I am facing a situation where the CSS of an element needs to be adjusted for devices like the Nexus 5X. These devices have 'Android nav bars' at the top and bottom, which can push elements around on the page. Currently, I am using jQ ...

css

Attach [!hidden] to a dropdown menu choice using Angular 2

How can I implement a show/hide feature for a select box in Angular 2+? Here's what I have so far: <select> <option disabled selected>Flow progress</option> <option *ngFor='let flow of flows'>{{flow}}< ...

htmlangulartypescriptangular2-forms

How to incorporate an image as a background in a Bootstrap 4 card

I'm working on achieving a specific design, as shown in the image https://i.sstatic.net/GRjwo.jpg In Bootstrap 4, it's simply a group of cards with the "card-img-overlay" class. The issue arises when the height of the card is dependent on the im ...

htmlcssbootstrap-4

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

Issues arise when using ng-repeat in conjunction with ng-click

I am facing some new challenges in my spa project with angularjs. This is the HTML snippet causing issues: <a ng-repeat="friend in chat.friendlist" ng-click="loadChat('{{friend.friend_username}}')" data-toggle="modal" data-target="#chat" d ...

javascripthtmlangularjs

Steer clear of pre-made CSS divs when incorporating them into your

I have created a CSS file that includes the following styles for div elements: div { height:auto; float:left; padding:0px; margin:0px; overflow:hidden; text-align:left; width:auto; } img { border:none; } ul { padding:0; margin:0; } ...

csshtmlintegration

Having trouble installing $ npm i mini-css-extract-plugin. Any ideas on what might be causing the issue?

There seems to be an error in my setup. I am using Visual Studio Code with gitBash. $ npm i mini-css-extract-plugin npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-p ...

javascriptcssnode.jsnpmwebpack

What is the best way to ensure an SVG maintains a fluid width while keeping its height constant?

My goal is to achieve the following: The SVG should dynamically scale its width to occupy 100% of the container's width. The SVG should either stretch or compress when the container's width changes, specifically affecting the wave drawn wit ...

htmlcsssvg

What is the best way to create a variable within this loop that remains constant and does not update?

I'm having some trouble phrasing this question, but I'm working on creating a loop to display dates for a calendar. So far, everything seems to be working well, except for one thing. My goal is to allow users to click on a date within the calenda ...

phphtml

Prevent browser menus from opening by using JavaScript without triggering a new popup window

In seeking to safeguard the source code of my website, I am looking to prevent any unauthorized access. Therefore, I aim to deactivate all common methods of accessing the code such as Ctrl+U, Ctrl+Shift+I, F12, and browser menu options. ...

javascriptphphtmlcss

Establishing Fixed Positioning

I'm currently working on fixing the position of an image at the top of a mobile view page. .fixed { position: fixed; } This is specifically for use with Ionic. <div class="item item-image polygon"> <img src="http://urbanetradio ...

css

jQuery functions correctly within jsfiddle, yet it encounters issues when utilized within WordPress

I've been experimenting with a jQuery script to grey out the screen. While it works perfectly on my jsFiddle link provided below, I'm having trouble getting it to work from within my WordPress plugin. Check out the working script on my jsFiddle ...

javascriptjqueryhtmlcsswordpress