'Inline styles working but not in style head (working on CS50 project 2)

I am working on CS50 Project 2 and have a webpage that displays active listings. I want to add some changes to the css, but it nothing happens when I add changes to the style in the head, but inline styles work. How do I make it work in the head style?

{% extends "auctions/layout.html" %}
<head>
{% block style %}
    <style>
       .text {
           font-size: 10%;
       }
    </style>
{% endblock %}
</head>
{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text" style = "color: aqua;">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}

This is the code. The font size doesn't change, but it will change colors because of the inline style.

If I add the color style to the head style, not in the inline, nothing happens. This is that code.

<head>
{% block style %}
    <style>
       .text {
           font-size: 50%;
           font-family: fantasy;
           color: aqua;
       }
    </style>
{% endblock %}
</head>
{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}

In this code the style does not change at all.

This is the html code that is rendered.

{% block body %}
    <h2>Active Listings</h2>

    {% for listing in listings %}
        <img src ="{{ listing.image }}" style = "height: 10%; width: 10%;">
        <h4 class = "text">{{ listing.title }}</h4>
        <h6>Description: {{ listing.description }}</h6>
        <h6>Category: {{ listing.category }}</h6> 
        <h6>Price: ${{ listing.bid }}</h6>
        
    {% endfor %}
{% endblock %}
htmlcssdjangocss-selectorscs50


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions