CSS file in same folder as HTML not found

Question

This is a really basic problem, but I've somehow been struggling to figure this out for the past week. I just started adding CSS to my project, and linked base_style.css to base.html. For some reason, the server cannot find base_style.css.

Base.html:

<head>
    <title> Chat </title>
    <link href = "base_style.css" type = "text/css" rel = "stylesheet">
    
</head>

base_style.css:

h1 {
    text-align: center;
}

However, when I run the server through my command prompt, I get:

[21/Aug/2020 23:35:25] "GET / HTTP/1.1" 200 517
Not Found: /base_style.css
[21/Aug/2020 23:35:25] "GET /base_style.css HTTP/1.1" 404 5153

Even through the base_style.css and base.html are in the same folder/directory:

08/18/2020  07:48 PM    <DIR>          .
08/18/2020  07:48 PM    <DIR>          ..
08/21/2020  11:24 PM               584 base.html
08/21/2020  11:24 PM                51 base_style.css
08/17/2020  12:05 AM               622 chatroom.html
08/13/2020  05:03 PM               418 chatrooms.html
08/15/2020  09:53 PM               376 edit_message.html
08/13/2020  05:00 PM               295 index.html
08/13/2020  05:06 PM               272 new_chatroom.html
08/14/2020  04:00 PM               378 new_message.html
               8 File(s)          2,996 bytes
               2 Dir(s)  417,867,866,112 bytes free

If anyone knows what's going on, I appreciate any help.

I am running this on my command prompt terminal, with just python manage.py runserver, and then opening 127.0.0.1:8000 on chrome. I've also tried running this through heroku, which also didn't work (but with no error message) — confused_student
– confused_student, Commented Aug 22, 2020 at 21:12

Rohan Singh · Accepted Answer · 2020-08-22 04:00:14Z

1

Try to use relative path:

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

answered Aug 22, 2020 at 4:00

Rohan Singh

7232 gold badges6 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

confused_student Over a year ago

I tried it out, but I'm still getting the same error: Not Found: /base_style.css

MichaelTr7 Over a year ago

That answer above does seem correct. I usually suggest putting the tag in this order <link rel=“stylesheet” href=“./base_style.css”>. I’d try it without the type property and maybe try another browser.

Ranjeet Eppakayala · Accepted Answer · 2020-08-22 07:52:38Z

0

While running app from server you need to specify path from root directory

If folder structure is like this: web-app > public > base_style.css

then path will be public/base_style.css

thus:

<link href=`public/base_style.css` type=`text/css` rel = `stylesheet`>

Specify path from your root folder and it will work :)

answered Aug 22, 2020 at 7:52

Ranjeet Eppakayala

3,0881 gold badge13 silver badges23 bronze badges

3 Comments

confused_student Over a year ago

the full path from Desktop is: "Desktop/project2/chat/chat_app/templates/chat_app/base_style.css". I've tried: "chat/chat_app/templates/chat_app/base_style.css", "chat_app/templates/chat_app/base_style.css", "templates/chat_app/base_style.css", "chat_app/base_style.css" and none of them work? very confused. I appreciate the help, thank you!

Ranjeet Eppakayala Over a year ago

Which folder you are running server from? In my example web-app folder has server.js which ups the server

confused_student Over a year ago

After I navigate to "Desktop/project2/chat", I run server by entering: "python manage.py runserver" into my command prompt

Swastik Goyal · Accepted Answer · 2020-08-22 08:39:05Z

0

To add a CSS file in HTML code being called by a server, you have to start the path from the base directory of the project.

It should be something like this:

<head>
    <title> Chat </title>
    <link href = "<path from project base dir to current dir>/base_style.css" type = "text/css" rel = "stylesheet">
    
</head>

answered Aug 22, 2020 at 8:39

Swastik Goyal

235 bronze badges

2 Comments

confused_student Over a year ago

the full path from Desktop is: "Desktop/project2/chat/chat_app/templates/chat_app/base_style.css". I've tried: "chat/chat_app/templates/chat_app/base_style.css", "chat_app/templates/chat_app/base_style.css", "templates/chat_app/base_style.css", "chat_app/base_style.css" and none of them work? very confused. I appreciate the help, thank you!

Swastik Goyal Over a year ago

Try adding path as "project2/chat/chat_app/templates/chat_app/base_style.css". This should most probably work.

Collectives™ on Stack Overflow

CSS file in same folder as HTML not found

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related