Django: html links to the wrong directory for the css

Here is my main page, localhost:8000/helloworld/greeter at helloworld\templates\hello:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Hello!</title>
        {% load static%}
        <link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
    </head>
    <body>
        <span class="message">Hello there, {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
    </body>
</html>

and here is the CSS file at helloworld\static\hello (so it should look for localhost:8000\helloworld\static\hello\site.css):

.message{
    font-weight
    color: blue;
}

and here is the file structure: enter image description here

The expected behaviour would be that the phrase "Hello there, [name]" is bolded and in blue, but here is what the code actually yields: (this is the problem) Incorrect And looking within the console gives this error: GET http://localhost:8000/static/hello/site.css net::ERR_ABORTED 404 (Not Found)

Notice how it seems to think that "static" is at the root directory, when it is in localhost\helloworld.

I would like to find a solution to this problem and change it so that it links to the correct directory

I tried to change the block, specifically:

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

to：

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

I expect that it will apply the site.css but it didn't and threw a TemplateSyntaxError.

The problem is fixed like so:

In the file settings.py, I changed the line to become STATIC_URL = '/helloworld/static/'

Back to Top