use a css stylesheet on a jinja2 template

Question

I am making a website using html, css, flask and jinja2.

I have a page working on a flask server, the buttons and labels etc. are displayed, but the css stylesheet I have is not loaded in.

How would I link a stylesheet to a jinja2 template. I have looked around on the internet but cannot find out how.

Here is the css stylesheet link; should I change this, or the python code?

<link rel="stylesheet" type="text/css" href="styles.css">

here is my flask code:

@app.route('/') def resultstemplate(): return render_template('questions.html', head='Welcome!')

here are the locations of the files:

/python-code.py /templates/template.html /templates/styles.css

Andrejs Cainikovs · Accepted Answer · 2017-06-07 20:40:23Z

60

All public files (the ones that are not processed, like templates or python files) should be placed into dedicated static folders. By default, Jinja2 has one static folder called static.

This should fix your problem:

Move /templates/styles.css to /static/styles.css
Update your code with following code, that will be translated into correct file location:
```
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> 
```

More info on static files in Jinja2 is here.

edited Jun 7, 2017 at 20:40

answered Jul 30, 2014 at 12:16

Andrejs Cainikovs

28.7k2 gold badges81 silver badges99 bronze badges

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

4 Comments

ptolemy0 Over a year ago

yes, it sort-of works. The font style and size (and maybe others but I can't tell) have worked but nothing else, so the page is not fully working.

Andrejs Cainikovs Over a year ago

If I have correctly understood you, CSS is loaded and works, which was covered in this question/answer. If you have other issues, accept this answer, and post them in separate questions.

ptolemy0 Over a year ago

yes it works perfectly, sorry, it was looking weird as I made it with Chrome, and was now viewing it firefox; there is now incompatibility.

Ambassador Kosh Over a year ago

If you are still having issues with the styling not loading after using the above code, try either clearing the cache of your browser or a 'hard refresh' by pressing ctrl+shift+r.

Sunil B N · Accepted Answer · 2014-07-30 10:49:47Z

<link rel="stylesheet" type="text/css" href="styles.css">

href value must be within quotes.

make sure the file name and path are proper OR try the below

<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"/>

yes you are right my code is wrong, but that doesn't make it work; I think the path is right; I have now posted the paths on the question

fedorqui · Accepted Answer · 2017-06-15 10:12:40Z

The order of handler might cause the problems:

url: /stylesheets static_dir: stylesheets url: /.* script: helloworld.application

will work instead of

url: /.* script: helloworld.application url: /stylesheets static_dir: stylesheets

Alan · Accepted Answer · 2022-01-08 14:08:16Z

you should use the super() block style . see the code below:

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

wcyn · Accepted Answer · 2019-01-03 16:58:18Z

Tried almost every solution on Stack Overflow. It only worked for me when I placed the static folder in the same directory as my run.py file. I changed my folder structure from:

app/ views static templates run.py

To:

app/ views templates static run.py

I guess moving the run.py instead would work too. Have a look at this Jinja Templating Tutorial for extra info. Not sure why I had to change the structure for it to work though.

Here is a solution that works that allows you to avoid refactoring stackoverflow.com/questions/58961132/…

jaredgorski · Accepted Answer · 2019-03-03 09:17:18Z

To add to what's been said here, be sure to update Jinja2 to v2.10, as lesser versions seem to cause this same bug. Cheers!

Collectives™ on Stack Overflow

use a css stylesheet on a jinja2 template

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Linked

Related