Styling Flask Applications with CSS

Styling Flask Applications with CSS

As we enhance our Flask application, it's important to focus on its appearance and user interface. While functionality is key, a visually appealing and user-friendly interface is essential for a great web application. In this lesson, we'll learn how to use Cascading Style Sheets (CSS) to make our application more engaging and easier to navigate.

Flask and CSS Integration

Flask applications typically use Jinja2 templates to structure HTML. CSS comes into play by allowing us to style these templates effectively. To keep our project organized, we'll place our CSS files in a folder named static.

This folder is like a library for static content, such as images and CSS files, that don’t change while the application is running. By keeping the styling separate from the main code, updating the look of our application becomes easy without altering any core functionality.

Creating a Simple Style Sheet

Let's create a simple CSS file named styles.css within the static directory. This file will help style our ToDo application.

Below is an example of how our styles.css might look:

/* Basic styling for the body text and layout */
body {
    font-family: Arial, sans-serif;
    margin: 10px;
    color: #333;
}

/* Basic styling for form input elements */
input, select, button {
    margin: 3px 0;
    padding: 5px;
}

/* Styling for buttons */
button {
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
}

/* Hover effect for buttons */
button:hover {
    background-color: #0056b3;
}

Linking Styles to Templates

To bring these styles into our HTML templates, we’ll add this line to the <head> section of your templates:

<!-- Link to the styles.css file for applying styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

The url_for function ensures that static files are linked correctly, regardless of the application's path.

Applying Styles to List Template

Let’s see how these styles enhance our templates/todo_list.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <!-- Link to the styles.css file for applying styles -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Todo List</h1>
    <!-- Other Components... -->
</body>
</html>
Sign up

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal