Static files are assets like:

• CSS
• JavaScript
• images

Where static files live

By default:

• static/static/ folder next to your app/package

Example:

myapp/
  app.py
  static/
    styles.css
  templates/
    base.html

myapp/
  app.py
  static/
    styles.css
  templates/
    base.html

Link CSS using url_for

In base.htmlbase.html:

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

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

Link JavaScript

<script src="{{ url_for('static', filename='app.js') }}"></script>

<script src="{{ url_for('static', filename='app.js') }}"></script>

Why url_for matters here too

• handles URL prefixes (reverse proxy setups)
• avoids hardcoded /static/.../static/...
• works cleanly with Blueprints and app factories

Production note

In production, Nginx or a CDN often serves static files more efficiently.

But the URL patterns should still work the same.