VOOZH about

URL: https://www.geeksforgeeks.org/python/how-to-use-css-in-python-flask/

⇱ How to Use CSS in Python Flask - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

How to Use CSS in Python Flask

Last Updated : 9 Dec, 2025

Flask is a popular web framework for Python that makes it easy to build web applications. One of the key elements of any web application is styling, which is where CSS (Cascading Style Sheets) comes in. CSS allows us to control the look and feel of our web pages, making them more attractive and user-friendly.

Load CSS file in Python Flask

Step 1: Setting Up the Flask Project

First, create a basic Flask project.

pip install flask

Next, check the Directory setup

👁 Screenshot-2024-07-17-000514
Directory Setup

Step 2: Create the Flask File

Inside this directory, create a new Python file called app.py. This will be the main file for your Flask application.

Step 3: Creating HTML Templates

Flask uses a folder called templates to store HTML files. Create a new directory named templates in your project folder and then create an index.html file inside this directory. The <link> tag in the <head> section. This tag tells the browser to load a CSS file named styles.css from the static directory. Flask uses the url_for function to generate the correct URL for this file.

Step 4: Adding CSS to Your Flask Project

  • Next, create a static directory in your project folder. This directory will hold all our static files, such as CSS, JavaScript, and images.
  • Inside the static directory, create a styles.css file. Add some basic CSS to this file.

Step 5: Running the Flask App

With everything set up, it's time to run our Flask application. In the terminal or command prompt, navigate to the project directory and run.

python app.py

Output

👁 Screenshot-2024-07-17-001340
Succesfully Run

Best Practices

  • Keep HTML files in the templates directory and CSS files in the static directory.
  • Link to external CSS files for better maintainability.
  • Avoid overly complex CSS to make it easier to understand and maintain.
  • Use consistent naming conventions for classes and IDs in CSS.
  • Test the web application on different devices and browsers to ensure consistent appearance.
Comment
Article Tags:
Article Tags: