Unable to connect the index.html file with the style.css file located in a different folder

I'm having an issue linking my style.css file to my index.html file. They are both located in different folders.

Here is the folder structure:

/parent

  • /src/index.html
  • /css/style.css

I have attempted using the following code snippets:

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

Despite trying these options, I keep encountering the same error message in the terminal:

GET /css/style.css 404 1.542 ms - 152

Currently, I am utilizing VS Code with live-server.

Note: Interestingly, when I move my index.html file outside the src folder to the parent directory, the path href="css/style.css" works as expected.

htmlcsssimplehttpservernpm-live-server

Answer №1

To begin, launch live-server within the main directory /parent, then proceed to access the file located in /src/index.html. If you initiate in the folder where index.html is situated, you will be unable to move upwards.

Answer №2

Make sure your link is formatted like this: href="style.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

Performing real-time calculations for standard deviation

I am working with a set of HTML input fields labeled "textfield". I would like to calculate the standard deviation dynamically and display it in another HTML input field. Here is the JavaScript code I am using for the calculation: <script type=&quo ...

javascripthtmlstandard-deviation

Modifying inline styles in React is as easy as placing the number within a div tag

I'm currently working on a React table component that consists of rows and columns. My main goal is to have the rows arranged vertically and the numbers within each row aligned horizontally. Here's how it looks at the moment: https://i.sstatic. ...

javascripthtmlcssreactjs

Showcase -solely one property object- from numerous property objects enclosed within an array

Hello, I am seeking assistance as I have recently begun learning about angularJS. I am working with objects that have keys such as: scope.eventList=[]; for(){ var event = { id : hash, ...

javascripthtmlarraysangularjsangularjs-ng-repeat

Using CSS to overlay a background image on top of a background gradient

Struggling to get both a background gradient and a background image (transparent PNG) to display in my div. No matter what, only the color gradient shows up while the image remains hidden. If I use a solid color instead of a gradient, the image displays ju ...

css

Obtain JSON information from a backend Node.js server and transfer it to the frontend HTML

I am currently facing an issue while trying to access JSON data and display it on the frontend screen. I have exported it in Node.js and attempted to import it into a script tag in HTML, but unfortunately, I am not able to retrieve the data. Is there a sol ...

javascripthtmlnode.jsreact-fullstack

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

javascripthtmliso8601

Disabling a button until a selection is made in a combobox using Angular

I am currently working on a template that includes a combobox, a button, and a table. What I am trying to achieve is to make the buttons unclickable unless a value is selected from the combobox. After selecting a value, the button will call a service metho ...

htmlangular

What could be the reason that the height: auto property is not creating a content area big enough to accommodate my content

When a user is not logged in, the header displays a logo and a login form that requires ample space. Once the user logs in, the full navigation menu appears in a smaller header size. To achieve this, adjusting the height:auto property of the "site-header" ...

htmlcssruby-on-rails

When using JQuery Validation on a small screen, error messages can cause the button to shift downwards

After successfully creating an email form with jquery validation error style that appears when there's an error, I encountered a problem. When the screen width is reduced or viewed on a small screen, the error message pushes down the button. I&apos ...

jquerycssjquery-validate

Tips for incorporating home and settings buttons into PhoneGap's webview

I am in the process of creating an app using PhoneGap. This app will feature icons for the home and settings buttons at the top of each webview, similar to an actionbar menu in Android. I am utilizing a generated template from ThemeRoller (CSS) for JQuery ...

jquery-uicsscordova

Trouble with JavaScript event listener/button functionality

Seeking a simple fix here. While I have experience in Java, I am slowly but surely delving into Javascript. Currently, I am working on creating a fun website. The specific task at hand involves utilizing the parse api. My approach (as there seemed to be ...

javascriptjqueryhtmlruby-on-rails

How can I showcase GWT widgets on RootPanel?

I have a <div> in My.html file: <html><head> <script type="text/javascript" language="javascript" src=" path/biz.path.nocache.js"></script></head> <div id = "div_test"> </div> Now I have created a java cl ...

javahtmlgwtgwt-widgets

Tips for including a new class in an HTML element

My goal is to add a specific class to an HTML tag, if that tag exists. This is the code I have attempted: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>index</title> <style> ...

javascriptjqueryhtmlcss

How to create space between elements in CSS without using margin or padding?

Recently, I stumbled upon a fascinating website while working on my own CSS grid project: I am curious to know how it was achieved. The Portfolio elements on the website have space between them without any visible margins or paddings that I could identify ...

cssmargin

Changing the appearance of the refresh button post-Ajax request using the same CSS classes

After browsing through various answers on Stack Overflow, I found ways to refresh Ajax content on elements with IDs. However, my specific need is to achieve this behavior on classes instead. Despite trying different methods like $.each and foreach loops, n ...

javascriptjqueryhtmlajax

Conceal any child elements that are cut off as a result of the overflow hidden property

Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...

javascriptcssflexbox

What is the best way to align an image in a particular div based on the current position of the viewport

I want to add a sleek animation while loading content using ajax. My goal is to display an icon while the "Content" div is reloading, but I'm not sure if this can be achieved with just CSS. The icon needs to: Always be horizontally centered within ...

ajaxcssjquery

Create high-quality PDFs from HTML pages

On my HTML page, I have a Bootstrap container with responsive images. When the page is viewed in a browser, I'd like to give users the option to print the page and receive a well-rendered PDF. However, I'm encountering issues where some images ar ...

htmlcssdjangogoogle-chromebootstrap-4

Photos failing to load in the image slider

Although it may seem intimidating, a large portion of the code is repetitive. Experiment by clicking on the red buttons. <body> <ul id="carousel" class="carousel"> <button id="moveSlideLeft" class="moveSlide moveSlideLeft"></button& ...

javascripthtmlcsscarousel

What is the best way to activate tooltip visibility on a mobile device?

I have implemented the {onmouseover} variable with the <a> tag to trigger the script function on hover. Here is an example: <a class="tooltip" href="#" onmouseover="tooltip.pop(this, '#tip3', {sticky:true, posit ...

javascripthtmljquerycss