CSS Problems with Flask Web App

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.

Application not picking up .css file (flask/python)

You need to have a 'static' folder setup (for css/js files) unless you specifically override it during Flask initialization. I am assuming you did not override it.

Your directory structure for css should be like:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Notice that your /styles directory should be under /static

Then, do this

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

Flask will now look for the css file under static/styles/mainpage.css

Why won't my Flask app connect to my CSS files?

Try

CTRL+SHIFT+R

in Chrome to reload the CSS.

On Mac try:

CMD+SHIFT+R

Otherwise right-click on the page in Chrome, select Inspect and select the Console tab to see what errors you get.

CSS and JS Not Working on Flask Framework

With the files laid out like you currently have them, move your index.html file into the root of static subfolder.

home/dubspher/mysite/

 - README.md 

 - app.py

Static/
 - index.html 

 - css

 - fonts

 - images

 - js

 - sass

And use the following app.py

from flask import Flask

# set the project root directory as the static folder, you can set others.
app = Flask(__name__, static_url_path="/static", static_folder='/home/dubspher/mysite/static')

@app.route('/')
def static_file():
    return app.send_static_file('index.html')

if __name__ == "__main__":
    app.run()

And change your index.html links to:

<html>
    <head>
        <title>Dubspher.</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
        <script src="/static/js/jquery.min.js"></script>
        <script src="/static/js/jquery.dropotron.min.js"></script>
        <script src="/static/js/jquery.scrollgress.min.js"></script>
        <script src="/static/js/jquery.scrolly.min.js"></script>
        <script src="/static/js/jquery.slidertron.min.js"></script>
        <script src="/static/js/skel.min.js"></script>
        <script src="/static/js/skel-layers.min.js"></script>
        <script src="/static/js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="/static/css/skel.css" />
            <link rel="stylesheet" href="/static/css/style.css" />
            <link rel="stylesheet" href="/static/css/style-xlarge.css" />
        </noscript>
        <!--[if lte IE 9]><link rel="stylesheet" href="/static/css/ie/v9.css" /><![endif]-->
        <!--[if lte IE 8]><link rel="stylesheet" href="/static/css/ie/v8.css" /><![endif]-->
    </head>

Your stylesheets are referenced in your javascript. Modify init.js so that it references the correct paths:

        global: { href: '/static/css/style.css', containers: 1400, grid: { gutters: ['2em', 0] } },
        xlarge: { media: '(max-width: 1680px)', href: '/static/css/style-xlarge.css', containers: 1200 },
        large: { media: '(max-width: 1280px)', href: '/static/css/style-large.css', containers: 960, grid: { gutters: ['1.5em', 0] }, viewport: { scalable: false } },
        medium: { media: '(max-width: 980px)', href: '/static/css/style-medium.css', containers: '90%', grid: { zoom: 2 } },
        small: { media: '(max-width: 736px)', href: '/static/css/style-small.css', containers: '90%!', grid: { gutters: ['1.25em', 0], zoom: 3 } },
        xsmall: { media: '(max-width: 480px)', href: '/static/css/style-xsmall.css' }

Why does my Flask app not render CSS if I don't clear my cache?

I assume you are loading your CSS files with something like:

{{ url_for('static', filename='some/file.css') }}

For this to refresh immediately in development, you should set the following config var to -1:

app.config['SEND_FILE_MAX_AGE_DEFAULT'] = -1

As @Matvei states, this issue is more to do with your browser. To visualise this, open the dev tools, go to the Network tab and highlight the specific CSS file. Then in the section on the right look for the following line under Headers -> Response Headers:

Cache-Control: public, max-age=-1

If the setting has been applied correctly this should show -1. If it shows anything else you need to refresh that specific file, until it does show -1, possibly having to clear your cache. This is because the browser makes the choice of whether to reload the file based on the Cache-Control header.

See my similar answer on this with screencaps and links to the docs.

CSS Problems with Flask Web App