How do I properly have a different css file for each html tempate in a Flask project?

Question

I have started a Flask project and to stay organized I would like to have a css file per html file. A lot of the tutorials online have one css file in the /static/styles.css file. When I run the following code, the css does not seem to be used and the terminal of the flask connection gives: 127.0.0.1 - - [01/Nov/2019 20:49:30] "GET /%7B%7B%20url_for('static',%20filename='css/index.css')%20%7D%7D HTTP/1.1" 404 - but it does load the page, just no css. Is there a standard way to have multiple css files in the static directory.

My project structure is:

Dockerfile docker-compose.yml venv app -> main.py -> templates -> index.html -> static -> css -> index.css

My main.py file is :

from flask import Flask, render_template app = Flask(__name__) app.config.from_object(__name__) # Set-up Flask routes. @app.route('/') def index(): return render_template('index.html')

My index.html file is:

 <!DOCTYPE html> <html lang="en"> {% block head %} <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" type="test/css" href="{{ url_for('static', filename='css/index.css') }}"/> </head> {% endblock %} <body> <header> <div class="container"> <strong><nav> <ui class="menu"> <li><a href="{{ url_for('index') }}">Home</a></li> <li><a href="{{ url_for('about') }}">About</a></li> </ul> </nav></strong> </header>

My index.css file is:

.menu li { display: 'inline-block"; border: 2px solid green; }

Ignoring whether that's a good idea or not, your css file is called index.css and sits in the root of the static folder, yet you're trying to include a file called layout.css that sits in a folder called css within the static folder. Try this for example <link rel="stylesheet" type="test/css" href="{{ url_for('static', filename='index.css') }}"/> — Till
– Till, Commented Nov 2, 2019 at 2:18
MY bad, I should have clarified. I have the css files in a css sub folder. Let me update my question/ — David Frick
– David Frick, Commented Nov 2, 2019 at 4:28

David Frick · Accepted Answer · 2019-12-06 02:01:31Z

A little later, I found the solution for this: In my/your base.html define a jinja template for the stylesheet so all pages have that as a default but can be overridden.

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

Then in another html file say posts.html, the stylesheet tag can be used to change it,

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

This allows use of multiple css files. However, this means all css will be overridden and used from the new css so there will be a lot of duplication across files. However, to me this makes it more organized and readable. It is a matter of preference. Good luck

Collectives™ on Stack Overflow

How do I properly have a different css file for each html tempate in a Flask project?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related