Почему моя таблица стилей CSS не связана с моим HTML-шаблоном?

В одном из моих HTML-шаблонов, который расширяет шаблон layout.html, есть CSS-файл, связанный с ним, но когда я пытаюсь придать стиль HTML-содержимому через CSS-файл, ничего не происходит даже после перезагрузки. К файлу layout.html уже привязан файл CSS, но он тоже не придает странице стиля.

Как сделать так, чтобы файл style.css стилизовал файл new.html (страницу, которая должна быть стилизована)? Или я должен создать новый CSS файл для стилизации файла new.html?

layout.html:

{% load static %}

<head>
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="{% static 'encyclopedia/styles.css' %}" rel="stylesheet">
    {% block style %}{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>

new.html:

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

{% load static %}

{% block title %}
New Entry
{% endblock %}

{% block style %}
<link href="{% static 'encyclopedia/new.css' %}" rel="stylesheet">
{% endblock %}

{% block body %}

<form action="">
    <input type="text" name="title" class="title" placeholder="Title">
    <textarea name="content" class="content" cols="30" rows="10" placeholder="Enter Content"></textarea>
    <input type="submit" value="Save" class="save">
</form>

{% endblock %}

style.css:

/* styling for the layout page */
body {
    margin: 0;
    background-color: white;
}

code {
    white-space: pre;
}

h1 {
    margin-top: 0px;
    padding-top: 20px;
}

textarea {
    height: 90vh;
    width: 80%;
}

.main {
    padding: 10px;
}

.search {
    width: 100%;
    font-size: 15px;
    line-height: 15px;
}

.sidebar {
    background-color: #f0f0f0;
    height: 100vh;
    padding: 20px;
}

.sidebar h2 {
    margin-top: 5px;
    color: red;
}

/* attempt to style new.html */

.title {
    border: 2px solid red;
}

new.css:

.title {
    border: 2px solid red;
}

.content {
    border: 2px solid blue;
}

В некоторых случаях css файл связан правильно, но не обновляется, попробуйте обновить css файл, используя ?{% now "U" %} в конце href, например 

<link href="{% static 'encyclopedia/new.css' %}?{% now "U" %}" rel="stylesheet">

У меня была та же проблема, и я использовал метод обновления, который сработал

Вернуться на верх