-2

I am making a Django app and when I try to run the different pages the HTML is loading but not the CSS, when I open the files normally (not from the server) it all works fine, but when I run them through the server it searches for the CSS at the URL page. Here is an example: at URL:http://127.0.0.1:8000/profile/create/ the HTML is all working but CSS isn't and I get this in the terminal:

[21/Dec/2022 10:11:54] "GET /profile/create/ HTTP/1.1" 200 1374
Not Found: /profile/create/style.css
[21/Dec/2022 10:11:54] "GET /profile/create/style.css HTTP/1.1" 404 2993

The HTML and CSS are in the same directory and here is my connection from my HTML

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>MyPlantApp</title>
</head>
Manoj Joshi
  • 132
  • 10
naskoto
  • 11
  • 5

2 Answers2

1

You need to create a folder for your static files and store all your static files there.

Set your static files directory using this code in your settings.py file:

STATICFILES_DIRS = [
(os.path.join(BASE_DIR, "static/")),
]

Your static folder should look like this static file folder.

Also you need to use the proper templating syntax to specify find your static files. Change this:

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

to this:

<link rel="stylesheet" type="text/css" href="{% static 'static/style.css' %}">

mfluehr
  • 2,832
  • 2
  • 23
  • 31
Nasredeen
  • 26
  • 3
  • you should create the static folder in your project root directory – Nasredeen Dec 21 '22 at 08:34
  • I tried all of that, still not loading it but the terminal output has change to 21/Dec/2022 10:36:33] "GET /profile/create/ HTTP/1.1" 200 1398 [21/Dec/2022 10:36:33] "GET /static/style.css HTTP/1.1" 404 1786 – naskoto Dec 21 '22 at 08:38
  • fixed it, and submited an edit to your post with what i did – naskoto Dec 21 '22 at 08:43
  • if u specified the directory for the static files the way i posted i don't think u need to make the edit u added. while stating your base directory did u add a forward slash? – Nasredeen Dec 21 '22 at 09:10
  • i made it: static 'style/style.css' – naskoto Dec 21 '22 at 10:07
0

Have you tried putting / before style.css? You are trying to get style.css from relative path of HTML file. If u put / before style.css it will try to get css file from root directory.

/style.css instead of style.css

<!-- Your Code -->
<link rel="stylesheet" type="text/css" href="style.css">

<!-- Might help -->
<link rel="stylesheet" type="text/css" href="/style.css">
Jaeger-dvlp
  • 76
  • 4