Why is a part of my CSS style not applied? - html

Question

Hii I'm kind of new so I might be making a rookie mistake but I have this HTML :
{% extends 'base.html' %}
{% load static %}
{% block meta %}
<title>HOME</title>
{% endblock meta %}
{% block style %}
<link rel="stylesheet" href="{% static 'style.css' %}">
{% endblock %}
{% block content %}
<div class="content">
<h1>Test</h1>
</div>
{% endblock content %}
and this CSS
div.content {
background-color: #DFBEBE;
text-align: center;
padding: 10px;
height: 100%;
}
But it's not working... I tried with .content before but it also won't apply to my HTML. I applied a h1 css (with font) and it works just fine. It also works just fine with my previous projects(?) What did I do?

Answer 1

I am not sure what your file structure is, but try something like this to link your stylesheet:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
url_for() is what I have always used for my django projects, and it has worked every time. Note: you will need to have the stylesheet placed in the 'static' folder (unless you change 'static' in the function to something else).

Answer 2

<link rel="stylesheet" type="text/css" href="index.css">
This is the easiest way to link them. Also check if the CSS and HTML are in the same folder

Answer 3

You're probably not linking it correctly to the CSS in the HTML. Make sure your path is correct. If it is, .content should work fine.
Here is the working JSFiddle with your code.