How to add multiple CSS files in the flask?

Question

I have two CSS files in my flask applications, main.css file, and profile-pic.css file. I want to apply main.css to every HTML file in the application and profile-pic.css to profile.html only. How can I achieve this in flask?

This is my flask structure:

flask
    static
        main.css
        profile-pic.css
    templetes
        profile-pic.html
        account.html
        ....

Are you using the template extension method? Like: {% extends 'base.html' %}? — GAEfan
– GAEfan, Commented Aug 9, 2020 at 17:25

GAEfan · Accepted Answer · 2020-08-09 17:36:41Z

1

Read about using template inheritance (extension):

https://flask.palletsprojects.com/en/1.1.x/patterns/templateinheritance/

You can put main.css in your base template. In the extended, you can put profile-pic.css, like this:

{% extends "base.html" %}

{% block addl_css %}
    <link rel="stylesheet" href="{{ url_for('static', filename='profile-pic.css') }}">
{% endblock %}
....
....

Make sure you add the new block inside the <HEAD> section in base.html, so it can accept the new block:

{% block addl_css %}
{% endblock %}

answered Aug 9, 2020 at 17:36

GAEfan

11.4k2 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Santosh Burada Over a year ago

Ya I added the CSS file to my profile-pic.html like you said. But no effect in the browser

GAEfan Over a year ago

And you added {% block addl_css %}{% endblock %} to the <HEAD> section of base.html?

Collectives™ on Stack Overflow

How to add multiple CSS files in the flask?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related