I'm working with a flask application that is functioning properly, but I would like to enhance it by incorporating my own custom CSS files.
My project structure is as follows:
my_app
-app.py
static/
-style.css
templates/
-index.html
The content of my index.html file is:
{% 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 %}
The contents of my css file named style.css include:
#testing {color:blue;}
#testing1 {color:red;}
div.containter{background-color:red}
This is what my page output looks like:
https://i.sstatic.net/czXe8.png
Despite the setup, the color scheme and background colors aren't reflecting in the output. Any insights on why my index.html isn't recognizing my stylesheet? I'm still navigating the world of flask, so any advice or suggestions would be greatly appreciated.