Only one of my templates is getting CSS in Flask - html

Question

I'm using flask to make a webserver, and while trying to edit the CSS of another template other than index.html, the CSS doesn't apply. The file system is as follows:
FlaskApp
app.py
static
style
style.css
templates
index.html
test.html
static and templates are both folders. index.html gets the CSS but test.html does not. The link is : "link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style/style.css') }}". Both html pages have the same link to the css file. What do I have wrong?

Answer 1

A simple flask app can have a minimalist structure like this one:
project_folder
|---------- app.py
|---------- config.py
|---------- .env
|---------- requirements.txt
|---------- .flaskenv
|---------- app/
|------ routes.py
|------ models.py
|------ __init__.py
|------ forms.py
|------ templates/
|-------- base.html
|-------- index.html
|-------- test.html
|------ static/
|-------css/
|------- styles.css
|-------js/
|------- app.js
This structure makes it easier to work with the different parts of a flask application following the principle of separation of concerns.
Flask has a concept called template inheritance. This is where one template can use the layout, styles, features et cetera of another template. In the structure above, I have three templates:
base.html : this is the parent template from which other templates will inherit
index.html : child template
test.html : child template
base.html will include a link to the styles.css file which is located in the css subfolder within the static folder. Both index.html and test.html will inherit the styles.css link from the base.html template.
<!-- base.html -->
{% extends 'bootstrap/base.html' %}
<!-- Title Section -->
{% block title %}
{% if title %}
Test | {{ title }}
{% else %}
Flask App
{% endif %}
{% endblock %}
<!-- Link Styles -->
{% block styles %}
{{ super() }}
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename = 'css/styles.css') }}">
{% endblock %}
<!-- This is borrowed from Bootstrap -->
<!-- Navbar Section -->
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Flask App</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
</nav>
{% endblock %}
<!-- End of Navbar Section -->
<!-- Your Content Goes Here -->
{% block content %}
<div class="container">
<!-- Other templates' content will go here -->
</div>
{% endblock %}
<!-- End of Your App Content -->
Above, base.html inherits the styles used by bootstrap/base.html using the keyword extends. This keyword is used every time you want to inherit another template.
If you look at the styles block, you can see the link that points to styles.css. That's it!
Now we can make the other two templates to inherit base.html.
<!-- index.html -->
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-sm-12">
<!-- title -->
<h1>Home Page</h1>
</div>
{% endblock %}
You can see that the keyword extends is used, meaning it inherits everything from base.html. We can do the same for test.html:
<!-- test.html -->
{% extends 'base.html' %}
{% block content %}
<div class="row">
<div class="col-sm-12">
<!-- title -->
<h1>Test Page</h1>
</div>
{% endblock %}
You can add classes and ids to your child templates and pass your styles in the styles.css file and they will be applied across your application.
These may be a lot of new concepts to you. Take your time to learn them and soon everything will make sense and become easier. As always, check the flask documentation for more specific information.