How to Use CSS in Python Flask

Last Updated : 18 Jul, 2024

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.

from flask import Flask, render_template

app = Flask(__name__)

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

if __name__ == '__main__':
    app.run(debug=True)

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Flask App</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <h1>Welcome to My Flask App!</h1>
        <p>This is a simple Flask application with enhanced CSS styling. Explore and enjoy!</p>
        <p>Learn more about <a href="https://flask.palletsprojects.com/">Flask</a>.</p>
    </div>
</body>
</html>

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.

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    color: #212529;
}

h1 {
    color: #da5d5d;
    text-align: center;
    padding: 20px;
    background-color: #007bff;
    border-bottom: 2px solid #0056b3;
}

p {
    text-align: center;
    font-size: 1.2em;
    color: #495057;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 50px;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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.

Conclusion

Using CSS in a Flask application enhances the visual appeal and user experience of web pages. By organizing HTML templates and static files properly, a Flask project remains neat and manageable. Flask makes it easy to integrate CSS, allowing for the creation of beautiful and functional web applications.