use a css stylesheet on a jinja2 template
Solution 1
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.
Solution 2
<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') }}"/>
Solution 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
Solution 4
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 %}
ptolemy0
Updated on July 09, 2022Comments
-
ptolemy0 almost 2 years
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
-
ptolemy0 almost 10 yearsyes 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
-
ptolemy0 almost 10 yearsyes, 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 almost 10 yearsIf 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 almost 10 yearsyes 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 about 3 yearsIf 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
. -
joeyagreco over 2 yearsHere is a solution that works that allows you to avoid refactoring stackoverflow.com/questions/58961132/…