CSS Problems with Flask Web App

Question

I can't get the CSS to output correctly - my webpages are all unstyled.

This is my link in all my templates. What am I doing wrong?

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

Is there anything special that I have to do with Flask to get it to work?

I've been trying and changing things for about half an hour but can't seem to get it right.

To sum it up: How do you do CSS with Flask - do I have to have any special python code?

Check your FireBug or Inspector, are you getting a 404 not found on that file? Make sure the path's correct. — Christopher Marshall, Dec 07 '12 at 23:59
Hmm as long as it still goes between the tags it should be ok. Is it possible to see the site you're working on. — dev, Dec 08 '12 at 00:00
Or how about setting an absolute path, I prefer not to use them. — dev, Dec 08 '12 at 00:01
Apparently Flask needs stylesheets to be specifically in a static folder - I originally thought it was optional and the site used static as an example, but I guess not. — Rohit Rayudu, Dec 08 '12 at 02:04

Nathan · Accepted Answer · 2012-12-08T00:57:50.733

You shouldn't need to do anything special with Flask to get CSS to work. Maybe you're putting style.css in flask_project/stylesheets/? Unless properly configured, such directories won't be served by your application. Check out the Static Files section of the Flask Quickstart for some more information on this. But, in summary, this is what you'd want to do:

Move static files you need to project_root/static/. Let's assume that you moved stylesheets/style.css into project_root/static/stylesheets/style.css.
Change
```
<link ... href="/stylesheets/style.css" />
```
to
```
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
```
This tells the template parser (Jinja2) to tell Flask to find the configured static directory in your project directory (by default, static/) and return the path of the file.
- If you really wanted to, you could just set the path as /static/stylesheets/style.css. But you really shouldn't do that - using url_for allows you to switch your static directory and still have things work, among other advantages.

And, as @RachelSanders said in her answer:

In a production setting, you'd ideally serve your static files via apache or nginx, but this is good enough for dev.

score 77 · Answer 2 · edited Apr 27 '23 at 09:30

77

Try reloading the browser using:

(Ctrl + Shift + R) or (Ctrl + F5)

edited Apr 27 '23 at 09:30

S3DEV

8,768
3
31
42

answered Dec 14 '19 at 04:22

Tanishka Gupta

779
5
3

39

WHAT KIND OF MAGIC IS THIS?? – VocoJax Apr 21 '20 at 21:21
6

Bypassing the cache. This got me as well. https://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache – Wfarah Sep 24 '20 at 23:23
3

It is called reloading the web cleaning caché. – Sebastian Paduano Mar 02 '21 at 23:27

score 23 · Answer 3 · answered Jun 22 '16 at 06:59

4 steps to do this (building a lot on some of the other answers here, presuming you've got Flask all set up properly):

1) Create a static folder in your app folder:[root_folder]/app/static/

2) Move all of your static content (images, JavaScript, CSS, etc.) into those folders. Keep the content in their respective folders (not mandatory, just neater and more organized).

3) Modify your __init__.py file in the app folder to have this line:

app.static_folder = 'static'

This will allow your app to identify your static folder and read it accordingly.

4) In your HTML, set up your file links as such:

<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

For example, if you call your CSS folder 'stylesheets' and file 'styles':

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

That should set everything up properly. Good luck!

Can this be done with template inheritance? I'm trying to use this code within my base.html, which other html files inherit from, but no luck. No error, just not working.. — jbuddy_13, May 29 '20 at 21:27

score 10 · Answer 4 · answered Dec 08 '12 at 00:43

You need to create a folder called "static" inside your Flask app, and then put all your CSS files there.

http://flask.pocoo.org/docs/quickstart/#static-files

In a production setting, you'd ideally serve your static files via apache or nginx, but this is good enough for dev.

score 3 · Answer 5 · answered Apr 03 '18 at 08:44

3

In my case - safari on macOS 10.13 - clearing the cache did the trick.

answered Apr 03 '18 at 08:44

heimi

499
7
16

score 3 · Answer 6 · answered Aug 10 '20 at 17:21

3

ctrl + shift + R trick works, especially if css loaded during the 1st run (that means, all paths are fine); but, not able to reload if changes made to css.

answered Aug 10 '20 at 17:21

Lavesh

169
7

score 2 · Answer 7 · answered Feb 11 '20 at 16:11

2

Try to do a hard refresh in the browser. You might be looking at a cached version. Hold down CTRL and press F5 in firefox.

answered Feb 11 '20 at 16:11

Sabito stands with Ukraine

4,271
8
34
56

score 2 · Answer 8 · edited Apr 29 '20 at 15:28

2

I had created static folder put my CSS in it and had properly linked it, but it wasn't working. I cleared browser's cache and it worked. Alternatively you can hard refresh the browser by pressing Ctrl+F5 on chrome.

edited Apr 29 '20 at 15:28

RobC

22,977
20
73
80

answered Apr 29 '20 at 12:05

Rohan Nagmoti

31
1
7

Does that fully address it though? – Michael Nelles Apr 29 '20 at 12:45
1

Yeah it doesnt but i thought this might help someone.I mean who has linked the files and all but is not getting the output. Thank you. – Rohan Nagmoti Apr 29 '20 at 13:28

score 2 · Answer 9 · answered Jul 27 '20 at 21:11

2

Simply hard refresh using (mac OS):

command + shift + R

answered Jul 27 '20 at 21:11

Aditi

357
1
7

score 1 · Answer 10 · answered May 01 '20 at 19:59

1

"If you change a static file, refresh the browser page. If the change doesn’t show up, try clearing your browser’s cache." -Flask documentation

answered May 01 '20 at 19:59

Manuel

11
1

2

You could have put this as a comment – zoran404 May 01 '20 at 21:41

score 0 · Answer 11 · answered Oct 09 '14 at 16:31

0

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 Oct 09 '14 at 16:31

George Nguyen

2,169
1
16
7

score 0 · Answer 12 · answered Sep 13 '22 at 13:50

Create the static path whenever you want it inside your project. In my case I placed it in /root_folder/frontend/static for the static files and /root_folder/frontend/templates for my templates, then I passed the routes to the constructor, like this:

app = Flask(__name__, template_folder='../frontend/templates', 
static_folder='../frontend/static/')

Finally my html tag looks like this:

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

score 0 · Answer 13 · answered Apr 12 '23 at 23:39

init issue After remove the static folder parameter, my css can load not problem.

Before app = Flask(name, static_folder="/mypath")

After app = Flask(name)

And remember to use : <link ... href="{{ url_for('static', filename='yourFolder/style.css') }}" />

CSS Problems with Flask Web App

13 Answers13

Linked