HTML not loading CSS in Django

Question

I have a problem that my HTML code does not load my css files. The code works if put into the main.html tag, however as outsourced to the separate css files, not working at all.

Link to the project: https://github.com/Svantevith/Python/tree/master/ToDoList

The overall structure of the folder:

The head tag of main.html:

<head>
    <title>ToDoList App</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> -->
    <link id="sheet-theme" rel="stylesheet" type="text/css" href="light.css"> 

    <!-- Nunito Font -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
</head>

In my django project, the rest of HTML files extend the main.html file, for example the register view:

{% extends 'base/main.html' %}

{% block content %}

    <div class="header-bar">
        <h1>Register</h1>
    </div>

    <div class="card-body">
        <form method="POST">
            {% csrf_token %}
            {{form.as_p}}
            
            <input style="margin-top: 16px" class="button" type="submit" value="Register">
        </form>

        <p>Already have an account? <a id="plain" href="{% url 'login' %}">Login</a></p>
    </div>

{% endblock content %}

What might be the problem?

EDIT: Solved the problem by adding the base/static/base folder and accessing the css via {% static 'base/file.css' %} as mentioned in the comments and official documentation ;)

Have a look at the documentation: docs.djangoproject.com/en/3.2/howto/static-files — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Jun 23, 2021 at 12:53
Does this answer your question? CSS is not working in Django app, no clue what is wrong — Abdul Aziz Barkat
– Abdul Aziz Barkat, Commented Jun 23, 2021 at 12:58
Instead of editing the solution, accept the answer that solves the problem. If you solve your own problem, write an answer yourself and accept it. Other than that, the question looks nice and clear. Maybe a bit more thorough searching the existing ones for duplicates... (or the documentation) ;-) — Chris Wesseling
– Chris Wesseling, Commented Jun 23, 2021 at 16:09
@ChrisWesseling, the answer is actually the comment. I cannot mark it as the best answer unfortunately — Filip Szczybura
– Filip Szczybura, Commented Jun 23, 2021 at 17:41
Then you can nudge the commenter to write up an answer, so they can get the credit. Or do what Rayyan Shaikh did: write the answer yourself (mark it community wiki) and then mark it accepted. We don't want to eat up the attention of people answering questions with questions that already have an answer. Closing questions helps with that. — Chris Wesseling
– Chris Wesseling, Commented Jun 24, 2021 at 9:11

Rayyan Shaikh · Accepted Answer · 2021-06-23 13:00:26Z

1

You have to just put the {% load static %} on top of your main.html code

And in the Head section, you should change the link as I did in href.

<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static 'light.css'%}">

answered Jun 23, 2021 at 13:00

community wiki

Rayyan Shaikh

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

Comments

m4n0 · Accepted Answer · 2021-09-09 05:08:51Z

0

Your href="light.css" is the problem here. The system is looking for that file in the main folder that you are in. You have to tell the system to go to the base folder in the template folder using Jinja syntax. Your link should be

<link id="sheet-theme" rel="stylesheet" type="text/css" href="{% static light.css %}">

edited Sep 9, 2021 at 5:08

m4n0

32.6k28 gold badges81 silver badges98 bronze badges

answered Sep 8, 2021 at 20:53

Nayeemur

155 bronze badges

Collectives™ on Stack Overflow

HTML not loading CSS in Django

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related