How to Use CSS in Python Flask Last Updated : 18 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 FlaskStep 1: Setting Up the Flask ProjectFirst, create a basic Flask project. pip install flaskNext, check the Directory setupDirectory SetupStep 2: Create the Flask FileInside this directory, create a new Python file called app.py. This will be the main file for your Flask application. Python 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 TemplatesFlask 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. HTML <!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 ProjectNext, 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. CSS 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 AppWith 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.pyOutputSuccesfully RunBest PracticesKeep 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.ConclusionUsing 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. Comment More infoAdvertise with us Next Article How to Use CSS in Python Flask T tmishra2001 Follow Improve Article Tags : Python Python Flask Practice Tags : python Similar Reads How to use Flask-Session in Python Flask Sessions in Flask store user-specific data across requests, like login status, using cookies. Data is stored on the client side but signed with a secret key to ensure security. They help maintain user sessions without requiring constant authentication.This article demonstrates how to implement serve 4 min read Todo list app using Flask | Python There are many frameworks that allow building your webpage using Python, like Django, flask, etc. Flask is a web application framework written in Python. Flask is based on WSGI(Web Server Gateway Interface) toolkit and Jinja2 template engine. Its modules and libraries that help the developer to writ 3 min read Flask login without database - Python In this article, we will talk about Python-based Flask login without a database in this article. In order to use Flask login without a database in this method basically we are using a python dictionary through which users will be able to log in using their login credentials that we add to the databa 4 min read Python | Using for loop in Flask Prerequisite: HTML Basics, Python Basics, Flask It is not possible to write front-end course every time user make changes in his/her profile. We use a template and it generates code according to the content. Flask is one of the web development frameworks written in Python. Through flask, a loop can 3 min read How PyCharm supports Flask in Python? Flask is a reliable framework for Python web applications and APIs. It is a well-liked option among developers due to its simplicity and adaptability. But to fully realize its potential, effective instruments are needed. PyCharm shows up as a powerful ally with a ton of capabilities designed specifi 3 min read How to create CSV output in Flask? In this article, we will see how to create a CSV output using Flask. Python and Flask Web Frameworks provide powerful tools to generate a report, export data and create catalogs. We will see how to generate both CSV files using Python and Flask. Creating CSV files in Python FlaskStep 1: Installation 3 min read How to Get Data from API in Python Flask In modern web development, APIs (Application Programming Interfaces) play a crucial role in enabling the interaction between different software systems. Flask, a lightweight WSGI web application framework in Python, provides a simple and flexible way to create APIs. In this article, we'll explore ho 2 min read How to Store Username and Password in Flask This article covers storing usernames and passwords in a Flask web app using MySQL. After logging in, users see a welcome message with their username.InstallationTo make our project we first create a virtual environment, to learn how to create and activate a virtual environment, refer to - Python vi 6 min read How to Build a Web App using Flask and SQLite in Python Flask is a lightweight Python web framework with minimal dependencies. It lets you build applications using Python libraries as needed. In this article, we'll create a Flask app that takes user input through a form and displays it on another page using SQLite.Run the following commands to install Fl 3 min read How to Install Flask in Windows? Flask is basically a Python module. It can work with Python only and it is a web-developing framework. It is a collection of libraries and modules. Frameworks are used for developing web platforms. Flask is such a type of web application framework. It is completely written in Python language. Unlike 2 min read Like