CODEWITHSUNDEEP
htmlcsswebget
confused_student
confused_student

Reputation: 1

CSS file in same folder as HTML not found

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.

Upvotes: 0

Views: 1415

Answers (3)

Swastik Goyal
Swastik Goyal

Reputation: 23

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>

Upvotes: 0

Ranjeet Eppakayala
Ranjeet Eppakayala

Reputation: 3028

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 :)

Upvotes: 0

Rohan Singh
Rohan Singh

Reputation: 643

Try to use relative path:

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

Upvotes: 1

Related Questions