Serving CSS files in Flask - Mini Project: Build & Apply

Serving CSS files in Flask

📖 Scenario: You are building a simple Flask web app that needs to show a styled homepage. To do this, you will serve a CSS file from a static folder and link it in your HTML template.

🎯 Goal: Build a Flask app that serves a CSS file correctly and applies styles to the homepage.

📋 What You'll Learn

Create a Flask app with a route for the homepage

Create a CSS file inside a static folder

Link the CSS file in the HTML template using url_for('static', filename='style.css')

Serve the homepage with the CSS styles applied

💡 Why This Matters

🌍 Real World

Web developers often need to serve CSS files to style their web pages. Flask's static folder and url_for function make this easy.

💼 Career

Knowing how to serve static files like CSS is essential for backend developers working with Flask to build web applications.

1

Create the Flask app and homepage route

Create a Flask app by importing Flask and instantiate it as app. Then create a route for '/' that returns the string 'Hello, Flask!'.

Flask

# Your code here

Hint

Start by importing Flask and creating an app instance. Then use @app.route('/') to define the homepage function.

2

Create the CSS file in the static folder

Create a folder named static in your project. Inside it, create a file named style.css with the exact content: body { background-color: lightblue; }

Flask

from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return 'Hello, Flask!'

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

Hint

Create a folder named static next to your Python file. Inside it, create style.css with the background color style.

3

Link the CSS file in the HTML returned by the route

Modify the home function to return an HTML string that includes a <link> tag in the <head> section. Use url_for('static', filename='style.css') to set the href attribute of the <link> tag. The HTML should have a <h1> with text Welcome to Flask inside the <body>.

Flask

from flask import Flask, url_for

app = Flask(__name__)

@app.route('/')
def home():
    # Return HTML with link to CSS
    # Your code here

Hint

Use a multi-line string with f"""...""" and insert the CSS link using url_for('static', filename='style.css').

4

Run the Flask app with debug mode

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

Flask

from flask import Flask, url_for

app = Flask(__name__)

@app.route('/')
def home():
    return f"""
    
      
        
      
      
        Welcome to Flask
      
    
    """

# Add the code to run the app below
# Your code here

Hint

Use the standard Python entry point check and call app.run(debug=True) inside it.

Practice

1. Where should you place CSS files in a Flask project to serve them correctly?

easy

A. Inside the css folder anywhere

B. Inside the static folder

C. In the root project directory

D. Inside the templates folder

Solution

1. Step 1: Understand Flask static file serving

   Flask automatically serves files placed inside the static folder.

2. Step 2: Identify correct folder for CSS

   CSS files must be inside the static folder to be served properly.

3. Final Answer:

   Inside the static folder -> Option B

4. Quick Check:

   CSS files go in static folder [OK]

Hint: Put CSS in the static folder for Flask to serve it [OK]

Common Mistakes:

• Placing CSS in templates folder
• Putting CSS in root directory
• Creating a separate css folder outside static

2. Which is the correct way to link a CSS file named style.css in a Flask HTML template?

easy

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

B. <link rel="stylesheet" href="/style.css">

C. <link rel="stylesheet" href="static/style.css">

D. <link rel="stylesheet" href="{{ url_for('templates', filename='style.css') }}">

Solution

1. Step 1: Use url_for to link static files

   Flask uses url_for('static', filename='...') to generate correct URLs for static files.

2. Step 2: Correct syntax in HTML template

   The link tag must use {{ url_for('static', filename='style.css') }} inside the href attribute.

3. Final Answer:

   <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> -> Option A

4. Quick Check:

   Use url_for('static', filename=...) for CSS links [OK]

Hint: Use url_for('static', filename='file.css') in href [OK]

Common Mistakes:

• Linking CSS without url_for
• Using 'templates' instead of 'static'
• Incorrect href paths

3. Given this Flask template snippet, what will be the rendered HTML for linking main.css if the app runs on http://localhost:5000?

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

medium

A.

B.

C.

D.

Solution

1. Step 1: Understand url_for output for static files

   By default, url_for('static', filename='main.css') returns the path starting with /static/ without domain.

2. Step 2: Rendered HTML link tag

   The rendered HTML will have href="/static/main.css" which is relative to the server root.

3. Final Answer:

   <link rel="stylesheet" href="/static/main.css"> -> Option A

4. Quick Check:

   url_for('static', filename=...) returns path starting with /static/ [OK]

Hint: url_for('static', ...) returns path starting with /static/ [OK]

Common Mistakes:

• Expecting full URL with domain
• Missing leading slash in href
• Using relative path without /static/

4. You wrote this in your Flask template to link CSS:

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

But the CSS is not loading. What is the most likely error?

medium

A. The CSS file name is misspelled in the url_for call

B. You forgot to include rel="stylesheet" in the link tag

C. You used url_for('templates', filename='styles.css') instead

D. The CSS file is not inside the static folder

Solution

1. Step 1: Check file location for static serving

   Flask only serves files placed inside the static folder automatically.

2. Step 2: Confirm file placement

   If the CSS file is outside static, Flask won't find it even if the link is correct.

3. Final Answer:

   The CSS file is not inside the static folder -> Option D

4. Quick Check:

   CSS must be inside static folder to load [OK]

Hint: Check CSS file is inside static folder if not loading [OK]

Common Mistakes:

• Placing CSS outside static folder
• Misspelling filename in url_for
• Using wrong folder name in url_for

5. You want to serve multiple CSS files in Flask: reset.css and theme.css. Both are inside the static/css folder. How should you link them correctly in your HTML template?

hard

A. <link rel="stylesheet" href="/static/reset.css">
<link rel="stylesheet" href="/static/theme.css">

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

C. <link rel="stylesheet" href="{{ url_for('static', filename='css/reset.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">

D. <link rel="stylesheet" href="static/css/reset.css">
<link rel="stylesheet" href="static/css/theme.css">

Solution

1. Step 1: Understand folder structure for static files

   Files inside static/css must be referenced with css/filename in url_for.

2. Step 2: Use url_for with correct filename path

   Link tags must use {{ url_for('static', filename='css/reset.css') }} and similarly for theme.css.

3. Final Answer:

   Use url_for with 'css/reset.css' and 'css/theme.css' -> Option C

4. Quick Check:

   Include subfolder in filename for nested static files [OK]

Hint: Include subfolder path in filename for nested static files [OK]

Common Mistakes:

• Omitting 'css/' folder in filename
• Hardcoding paths without url_for
• Using wrong folder names in href