FlaskHow-ToBeginner · 4 min read

How to Add CSS and JS in Flask Template Easily

To add CSS and JS files in a Flask template, place them in the static folder and link them using url_for('static', filename='path/to/file') inside your HTML template. Use <link> tags for CSS and <script> tags for JS referencing these URLs.

📐

Syntax

In Flask, static files like CSS and JS go inside the static folder. You link them in your HTML templates using the url_for function to get the correct URL.

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> for CSS files.
<script src="{{ url_for('static', filename='js/script.js') }}"></script> for JavaScript files.

html

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>

💻

Example

This example shows a simple Flask app with a template that includes a CSS file to style the page background and a JS file that shows an alert when the page loads.

python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

Output

Running the app and opening http://127.0.0.1:5000/ shows a page with a light blue background and an alert popup saying 'Hello from JS!'.

💻

Example - Template and Static Files

Here are the contents of the template and static files used in the example:

html

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask CSS and JS</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <h1>Welcome to Flask!</h1>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html>

/* static/css/style.css */
body {
    background-color: #add8e6;
    font-family: Arial, sans-serif;
    text-align: center;
    padding-top: 50px;
}

// static/js/script.js
window.onload = function() {
    alert('Hello from JS!');
};

Output

The browser displays a centered heading on a light blue background and shows an alert popup with the message 'Hello from JS!' when the page loads.

⚠️

Common Pitfalls

Not placing CSS and JS files inside the static folder causes Flask to not find them.
Forgetting to use url_for('static', filename='...') results in broken links.
Using incorrect paths or missing file extensions leads to 404 errors.
Not including the rel="stylesheet" attribute in CSS <link> tags can cause styles not to apply.

html

<!-- Wrong way: hardcoding path without url_for -->
<link rel="stylesheet" href="/css/style.css">

<!-- Right way: use url_for to generate correct URL -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

📊

Quick Reference

Purpose	Syntax Example
Link CSS file
Include JS file
Static folder location	Place CSS and JS files inside the `static` directory at project root
Template usage	Use Jinja2 syntax `{{ url_for('static', filename='path/to/file') }}` to link files

✅

Key Takeaways

Always put CSS and JS files inside the Flask project's static folder.

Use {{ url_for('static', filename='path/to/file') }} in templates to link static files correctly.

Use tags for CSS and