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

Asked By: ptolemy0

||

Source

Answer 1

<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') }}"/>

Answered By: Sunil B N

Answer 2

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.

Answered By: Andrejs Cainikovs

Answer 3

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

Answered By: George Nguyen

Answer 4

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.

Answered By: wcyn

Answer 5

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!

Answered By: jaredgorski

Answer 6

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 %}

Answered By: stephen mbelenga

use a css stylesheet on a jinja2 template

Question:

Answers: