Styling Flask Applications with CSS

Lesson 3

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:

CSS
1/* Basic styling for the body text and layout */
2body {
3    font-family: Arial, sans-serif;
4    margin: 10px;
5    color: #333;
6}
7
8/* Basic styling for form input elements */
9input, select, button {
10    margin: 3px 0;
11    padding: 5px;
12}
13
14/* Styling for buttons */
15button {
16    background-color: #007bff;
17    color: #fff;
18    border: none;
19    cursor: pointer;
20}
21
22/* Hover effect for buttons */
23button:hover {
24    background-color: #0056b3;
25}

Linking Styles to Templates

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

HTML, XML
1<!-- Link to the styles.css file for applying styles -->
2<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:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Todo List</title>
7    <!-- Link to the styles.css file for applying styles -->
8    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
9</head>
10<body>
11    <h1>Todo List</h1>
12    <!-- Other Components... -->
13</body>
14</html>

Applying Styles to Edit Template

Similarly, apply these styles to templates/todo_edit.html:

HTML, XML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Edit Todo</title>
7    <!-- Link to the styles.css file for applying styles -->
8    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
9</head>
10<body>
11    <h1>Edit Todo</h1>
12    <!-- Other Components... -->
13</body>
14</html>

By linking the stylesheet to both templates, we ensure the application consistently looks polished and cohesive. This consistency enhances user experience whether they are browsing their tasks or editing them.

Summary and Preparation for Practice

In this lesson, we’ve learned how to integrate CSS into our Flask To-Do application by creating a styles.css file in the static directory and linking it to our HTML templates.

Not only does this improve the visual appeal, but it also enhances the overall user experience. As you move on to the next exercises, you'll have the chance to test out different styles and further customize your To-Do application.

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.