CSS Problems with Flask Web App

Solution 1:

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:

1. 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.

2. 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.

Solution 2:

try reloading the chrome using

ctrl + shift + R