Serving CSS files in Flask - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of serving CSS files in a Flask web application?

Serving CSS files allows the web app to apply styles and layouts to HTML pages, making the site visually appealing and easier to use.

beginner

Where should CSS files be placed in a Flask project to be served correctly?

CSS files should be placed inside the 'static' folder in the Flask project directory. Flask automatically serves files from this folder.

beginner

How do you link a CSS file in a Flask HTML template?

Use the url_for('static', filename='style.css') function inside the href attribute of a <link> tag, like this: <br><link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

beginner

What Flask function helps generate the URL for static files like CSS?

The url_for() function with the first argument 'static' helps generate the correct URL path to static files such as CSS, JavaScript, or images.

intermediate

Why is it important to use url_for('static', filename='...') instead of hardcoding the CSS file path?

Using url_for ensures the URL is correct even if the app's structure or deployment changes. It helps avoid broken links and makes the app more flexible.

Where should you place CSS files in a Flask project to serve them properly?

A Inside the 'static' folder

B Inside the 'templates' folder

C In the root project folder

D Inside the 'css' folder anywhere

Flask serves static files like CSS from the 'static' folder by default.

Which Flask function is used to generate the URL for a CSS file in a template?

A url_for('static', filename='style.css')

B render_template('style.css')

C send_file('style.css')

D static_url('style.css')

url_for with 'static' and filename generates the correct URL for static files.

What HTML tag is used to link a CSS file in a Flask template?

A <style>

B <link>

C <script>

D <css>

The tag is used to include external CSS files in HTML.

Why should you avoid hardcoding CSS file paths in Flask templates?

A Because Flask does not allow hardcoded paths

B Because hardcoding is faster

C Because CSS files cannot be hardcoded

D Because url_for handles URL changes automatically

url_for ensures URLs remain correct even if the app structure changes.

If your CSS file is named 'main.css' and is inside the 'static/css' folder, how do you link it in a Flask template?

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

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

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

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

You specify the path relative to the 'static' folder inside url_for.

Explain how to serve and link a CSS file in a Flask web application.

Think about where Flask looks for static files and how templates access them.

Describe the role of the 'static' folder in Flask and how it relates to serving CSS files.

Consider how Flask handles files that do not change dynamically.