URL_for with static files in Flask - Mini Project: Build & Apply

Using url_for to Link Static Files in Flask

📖 Scenario: You are building a simple Flask web page that needs to include a CSS file for styling. Flask serves static files like CSS from a special folder called static. To link these files correctly in your HTML, you use the url_for function.

🎯 Goal: Create a Flask app that renders an HTML page linking a CSS file from the static folder using url_for. This will style the page with the CSS.

📋 What You'll Learn

Create a Flask app with a route for the home page

Create a CSS file named style.css inside a static folder

Use url_for('static', filename='style.css') in the HTML template to link the CSS file

Render the HTML page with the CSS applied

💡 Why This Matters

🌍 Real World

Web developers often need to serve CSS, JavaScript, and images as static files in Flask apps. Using url_for ensures the correct URL paths are generated, making the app reliable and easier to maintain.

💼 Career

Knowing how to serve and link static files is essential for building professional Flask web applications that look good and function well.

1

Set up the Flask app and static folder

Create a Flask app by importing Flask and creating an app instance called app. Also, create a folder named static in your project directory and add a file named style.css inside it with the exact content: body { background-color: lightblue; }

Flask

# Your code here to import Flask and create app

# Create static/style.css file with body { background-color: lightblue; }

Need a hint?

Start by writing from flask import Flask and then app = Flask(__name__). Remember to create the static folder and add style.css with the exact CSS content.

2

Create a route for the home page

Add a route decorator @app.route('/') and define a function called home that will render an HTML page. For now, just return a simple string 'Hello, Flask!'.

Flask

from flask import Flask
app = Flask(__name__)

# static/style.css file content:
# body { background-color: lightblue; }

# Add route and home function below
# Your code here

Need a hint?

Use @app.route('/') above a function named home. The function should return the string 'Hello, Flask!'.

3

Import render_template and create an HTML template

Import render_template from flask. Create a folder named templates and inside it create a file named index.html. In index.html, write a basic HTML page that includes a <link> tag to the CSS file using url_for('static', filename='style.css'). Change the home function to return render_template('index.html').

Flask

from flask import Flask, render_template
app = Flask(__name__)

# static/style.css file content:
# body { background-color: lightblue; }

@app.route('/')
def home():
    # Change return to render_template
    # Your code here

Need a hint?

Import render_template and use it in home to return index.html. In the HTML, use {{ url_for('static', filename='style.css') }} inside the href of the <link> tag.

4

Run the Flask app with debug mode

Add the standard if __name__ == '__main__': block at the bottom of your script. Inside it, call app.run(debug=True) to start the Flask server with debug mode enabled.

Flask

from flask import Flask, render_template
app = Flask(__name__)

# static/style.css file content:
# body { background-color: lightblue; }

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

# Add the if __name__ == '__main__' block below
# Your code here

Need a hint?

Use the if __name__ == '__main__': block and call app.run(debug=True) inside it to run the app.