Serving CSS files in Flask - Step-by-Step Execution

Concept Flow - Serving CSS files

Start Flask App

↓

Client Requests HTML

↓

Server Sends HTML with <link> to CSS

↓

Browser Requests CSS file

↓

Flask Serves CSS from static folder

↓

Browser Applies CSS Styles

↓

Page Renders Styled

This flow shows how Flask serves CSS files by placing them in a static folder and linking them in HTML, so the browser can request and apply styles.

Execution Sample

Flask

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

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

A simple Flask app serving an HTML page that links to a CSS file in the static folder.

Execution Table

Step	Action	Server Response	Browser Request	Browser Behavior
1	Client requests '/' URL	Server runs home() and returns index.html	Browser receives HTML with <link> to CSS	Browser parses HTML and sees CSS link
2	Browser requests CSS file from '/static/style.css'	Server finds 'style.css' in static folder and sends it	Browser receives CSS file	Browser applies CSS styles to the page
3	Page fully styled	No further server action	No further browser requests	Page displays with CSS styles applied

💡 CSS file served successfully from static folder; browser applies styles and rendering completes

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
HTML content	None	index.html with <link> to CSS	Same	Same
CSS file	None	None	style.css content sent	Loaded and applied
Page style	Default browser style	Default browser style	CSS styles applied	Styled page

Key Moments - 2 Insights

Why do we put CSS files in the 'static' folder in Flask?

Flask automatically serves files from the 'static' folder at the '/static/' URL path, so placing CSS there lets the browser request and receive them correctly, as shown in execution_table step 2.

What happens if the CSS file is missing or path is wrong?

The browser requests the CSS file but the server returns 404 Not Found, so no styles are applied. This breaks the flow after step 2 in the execution_table.

Visual Quiz - 3 Questions

Look at the execution_table, what does the server send in step 2?

A The HTML page with CSS link

B The CSS file content from static folder

C A 404 error

D Nothing, it waits

💡 Hint

Check the 'Server Response' column in step 2 of the execution_table

At which step does the browser apply the CSS styles?

A Step 3

B Step 1

C Step 2

D After the page loads

💡 Hint

Look at the 'Browser Behavior' column in the execution_table

If the CSS file was placed outside the static folder, what would happen?

A Server would return 404 Not Found

B Browser would not request it

C Flask would serve it normally

D CSS would load but not apply

💡 Hint

Refer to the key_moments explanation about missing or wrong CSS path

Concept Snapshot

Serving CSS files in Flask:
- Place CSS files in 'static' folder
- Link CSS in HTML with <link href="/static/style.css">
- Flask serves static files automatically
- Browser requests CSS after HTML
- CSS styles apply after loading
- Missing files cause 404 errors

Full Transcript

In Flask, CSS files are served by placing them in the 'static' folder. When a client requests the main page, Flask returns the HTML which includes a link to the CSS file in the static folder. The browser then requests the CSS file from the server. Flask automatically serves files from the static folder at the '/static/' URL path. Once the browser receives the CSS file, it applies the styles to the page, resulting in a styled webpage. If the CSS file is missing or the path is incorrect, the server returns a 404 error and the styles do not apply. This process ensures that CSS files are properly served and applied in Flask web applications.