Couldn't integrate a CSS file into my project

I would like to connect my layout.html file with a CSS file so that every other page extending my layout.html has access to this CSS file.

That is the code:

layout.html

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Aufgabenzettel</title>
        <link rel="stylesheet" href="/aufgabenzettel/static/css/main.css">
    </head>
    <body>
        {% block body %}
        {% endblock %}
    </body>

</html>

index.html

{% extends "aufgabenzettel/layout.html" %}

{% block body %}
    <h1>Meine Aufgaben</h1>
{% endblock %}

main.css

h1 {
    color: aqua;
}

The href in layout.html is probably correct bacause I can be redirected to it in VS via ctrl + click. However, the h1 in index.html still appears in black instead of aqua... What am I doing wrong?

I appreciate every kind of help!

Solution

First you have to add {% load static %} at the top of your code where you want to use static function in template and than you have to use static function like this {% static 'your_css_path_inside_static_directory' %} eg.

{% load static %}
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>Aufgabenzettel</title>
        <link rel="stylesheet" href="{% static '/aufgabenzettel/static/css/main.css' %}">
    </head>
    <body>
        {% block body %}
        {% endblock %}
    </body>

</html>