Trouble with connecting CSS files

Can anyone explain why my CSS file isn't linking properly when the HTML file is located in a subfolder within the directory that contains both the CSS and HTML folders? I attempted to remove the main folder path from the link, but the issue still persists.

Here's an image illustrating the problem: https://i.sstatic.net/Q1mWA.jpg

*The CSS file functions correctly only when the HTML file is not nested in a separate folder.

Answer №1

If you're looking to utilize a relative path for the CSS file, remember that the link href should be based on the location of your html file:

<link rel="stylesheet" href="../css/9a.css">

The .. tells the browser to traverse outside of the "html" directory where your html file is stored, then locate the "css" folder and finally access your css file.

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

An innovative tool for discovering how different colors will complement each other

Design may not be my strong suit, but there are times when I need to add a border line or a shade of gray to a background color. Is there a tool available where I can specify background color: #343434 color: #asdfgh and visually see how it will look wit ...

Access WordNet using JavaScript

Currently developing a web application that involves NLP tasks. In my past projects, I have used the JWNL library in Java which has always served me well. I am curious to know if you have any advice on the most effective approach for querying the WordNet ...

What is the approach for incorporating JavaScript variables in Jade templates for writing inline CSS styles?

Struggling to inject CSS code dynamically? You're not alone. style(type='text/css') #header a#logo { background:url(constants.logo) no-repeat; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { #header a#logo { ...

Confusing focus styling in React Bootstrap on mobile devices

THE ISSUE: Facing a problem in my project where on mobile, when a button is selected and then unselected, it remains dark due to focus which can be confusing. To see the issue in action, check out this screen recording: Screen recording You can view the ...

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

The collapsible tree nodes overlap one another in the D3.js visualization

I'm currently working on integrating a d3 code into Power BI for creating a collapsible tree structure. Each node in the tree is represented by a rectangular box, but I've run into an issue where nodes overlap when their size is large. Below is t ...

Browser refusing to acknowledge jQuery/JavaScript (bootstrap)

Here is where I include the necessary jQuery libraries and my custom jQuery code: <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src= ...

Issue with sending files to web API using Angular FormData

After stepping through the code, I noticed that my formData is empty when it reaches the API side, with the parameter pFileToUpload having a value of null. Step 1: HTML <div class="form-group"> <input type="file" id="f ...

I am having trouble placing the button within the image

Essentially, my goal is to place the button within the image and ensure it remains in its position when transitioning to mobile mode or adjusting window size. This is the desired outcome: https://example.com/image https://example.com/button-image .img ...

Showing small previews of images using php

I'm struggling with getting linked images to display. The code I have is currently located in a .php file. Its purpose is to retrieve all images from the directory where the file resides and show them using a "for" loop. However, at the moment, it onl ...

What is the best method for positioning 2 buttons at the bottom of a card using Bootstrap?

I need help with adjusting the position of two buttons in my bootstrap design. I would like both buttons to be located at the bottom of the card and have a slight gap between them, perhaps around 5 pixels. Below is the snippet of code: <div class=" ...

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

What are the steps for implementing the innerClass style on the searchBox within the appBase?

I'm currently incorporating the searchBox component from appbase io into my upcoming js web application, but I've been facing challenges in customizing the layout of both the search box and the list. Despite following the documentation which sug ...

Having trouble scrolling on a Chrome browser with the Muse website?

My significant other is having some trouble with her muse-created website at . It seems to have an issue scrolling horizontally on Chrome, but works fine on Safari and Edge. The site is part of a university project and she hopes it will eventually look lik ...

Prevent Click Event in JQuery

I have a requirement to disable all click events on my webpage. However, even after using the appropriate code to prevent these events from firing, some of them are still getting called. Let me explain with an example. <div id='parent'> ...

Verify whether all the elements within a specific div are distinct by utilizing jQuery

I need to create a select box that, when an option is chosen, generates a certain number of textboxes within a div. Currently, there are three fields: display_name[], user_name[], and user_password[] The code for this functionality is as follows: <se ...

Develop dynamic and stylized CSS using PHP within the Laravel framework

I am experiencing an issue with creating CSS files in Laravel within my controller. When I try to return the result, it shows up as a normal text file instead of a CSS file. In my routes.php file, I have: Route::get('/css/{css}.css', 'File ...

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

Differences in Spacing: Exploring Bootstrap v5.1.1 Compared to 4.0

After comparing two pages, one using Bootstrap v5.1.1 and the other with 4.0.0, I have observed differences in spacing. Bootstrap v5.1.1: .topspacer { padding-top: 70px; } .righticon { float: right; } .clear { clear: both; } a { text- ...

Align images to the bottom of the gallery only if their heights differ

I'm currently working on an image gallery project and have encountered a problem. When all the image labels are of the same length, they align perfectly. However, if the label is longer than one line, it causes the image to move up instead of creating ...