Why doesn't my CSS style sheet link to my HTML template?-CodePudding

One of my HTML templates that extends the layout.html template has a CSS file linked to it but when I try to style the HTML content through the CSS file, nothing happens even after reloading. There is already a CSS file linked to the layout.html file but that does not style the page either.

How do I make the style.css file style the new.html file (the page that should be styled)? Or should I make a new CSS file to style the new.html file?

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"  placeholder="Title">
    <textarea name="content"  cols="30" rows="10" placeholder="Enter Content"></textarea>
    <input type="submit" value="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;
}

CodePudding user response：

some time css file linked properly but it can't update, just try to update your css file using ?{% now "U" %} at the end of href like

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

I was face same problem and I use update method that's worked