How to add css files to your Flask Application?

Question

I have a flask application that runs fine but I want to add my own css files to make it more custom.

Here is my project structure

my_app
    -app.py
    static/
          -style.css
    templates/
           -index.html

Here is my index.html:

{% extends "bootstrap/base.html" %}
{% block html_attribs %} lang="en"{% endblock %}

{% block title %} My_APP {% endblock %}

{% block styles %}
{{super()}}
<link rel="stylesheet"  type="text/css" href="{{url_for('static', filename='style.css')}}">
{% endblock %}

{% block navbar %}
<div class="navbar navbar-expand-lg navbar-dark bg-dark" style="background-color:DodgerBlue" role="navigation" >
    <div class="containter">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
             data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
                <span class="icon-bar">Toggle Navigation</span>
            </button>
            <a class="navbar-brand" href="{{ url_for('home_page')  }}">ISE App</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="{{ url_for('home_page')  }}"> Home </a></li>
                <li><a href="{{ url_for('add_mac') }}"> Add </a></li>
                <li><a href="{{ url_for('upload_mac')  }}"> Bulk Load </a></li>
                <li><a href="{{ url_for('delete_mac') }}"> Delete </a></li>
                <li><a href="{{ url_for('bulk_remove') }}"> Bulk Remove </a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}


{% block content %}
<div class="containter">
    <h3 id="testing">Hi how are you!!</h3>
    {% block page_content %}<h3 id="testing1">Hi how are you!!</h3>{% endblock %}
</div>
{% endblock %}

Here is my css file named style.css

#testing {color:blue;}
#testing1 {color:red;}


div.containter{background-color:red}

Here is my page output:

As you can see, the two h3 tags are not blue or red and the containter background color is not red.

Any idea as to why my index.html is not references my style sheet? I am new to flask so any ideas or suggestion would be highly appreciated.

Answer 1

Try:

{% block styles %}
{{super()}}
    <link rel="stylesheet"  type="text/css" href="{{url_for('.static', filename='style.css')}}">
{% endblock %}