Build Website with Flask – Part 7 – Be on the Right Side of Change

This is part of our Flask series:

Story: Assume you work in the IT Department of Right-On Realtors. Your boss asks you to create a simple website the Realtors can query to view current Home Sales.

He would like this website created using the Flask plugin.

What is Flask?

Flask is a web app framework created with ease of use in mind. Without much training, you can easily create a simple web application. Flask works with Bootstrap, HTML, CSS, and Jinja (to name a few) to create a website.

Preparation

This article assumes you have completed the following from Part 1, Part 2, Part 3, Part 4, Part 5, and Part 6:

Created and Activated a Virtual Environment.
Installed all of the required plugins.
Created the appropriate folder structure.
Created and saved an app.py file to the realtors folder.
Added Routes to the app.py file.
Added Jinja to the base template.
Created and saved HTML files to the realtors/templates folder.
Linked to Bootstrap.
Added a Bootstrap Navbar to the base template file (base.html).
Added Jinja to the HTML pages.
Viewed the website in a Browser.

Added a Form with elements to an HTML page.
Added Jinja to the Reports page.
Added code to app.py to get the HTML Form working.

Read in the Real Estate CSV file to a DataFrame.
Queried the results based on a Zip Code.
Displayed the results on the Reports page.

Validated the Zip Code.
Cleaned-Up the Data.
Corrected the Sales Prices.
Formatted the Sales Prices.
Updated the Navbar.

In Part 7, you will learn how to:

Add a Stylesheet.
Apply styles to the Navbar.
Finally, apply styles to the HTML pages.

Add the following code to the top of each code snippet. This snippet will allow the code in this article to run error-free.

import pandas as pd
from flask import Flask, render_template, request

Styles Overview

Our website is looking pretty bland right now. We can correct this by adding a Stylesheet and applying styles to the HTML elements.

A stylesheet is a file with the extension CSS. This acronym stands for Cascading Style Sheets.

With CSS, you can change the color, font size, font type, spacing, position, and more, of any HTML element across the website.

The number of styles you can apply is endless!

Add a Stylesheet

The first thing we need to do is create a style.css file. To do this, perform the following steps:

From the IDE, navigate to the realtors -> static -> css folder.
In this folder, create the file style.css.

The next step is to reference this file in the base template (base.html). To do this, navigate to and open this file.

Add the line highlighted in yellow and save.

<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <title></title>
</head>

The <link> HTML tag calls in the style.css file created above. This tag means that all HTML files on the site now have access to the CSS file.

Our next step is to add styles to styles.css and reference them in an HTML file.

💡 Note: Click here to learn more about styles.

Apply Styles to the Navbar

In this section, we will create custom styles for the Navbar.

After adding style(s) to the style.css file, we need to connect these style(s) to HTML element(s). For this example, the Navbar.

💡 Note: The Navbar is common to all HTML pages on the website and is in the base template (base.html) file.

Copy the code below to the clipboard. Paste this code to the style.css file (CTRL+V) and save.

.navbar-custom {
    background-color: #6080bf;
    box-shadow: 0 4px 2px -2px gray;
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-text {
    color: #ffffff;
}

.navbar-custom .navbar-nav .nav-link {
    color: #ffffff;
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #1d2c59;
}

These CSS styles do the following when applied to the Navbar:

Change the background color.
Add a shadow.
Change the link and hover colors.

💡 Note: To practice CSS, try changing the colors and re-run.

Next, navigate to and open the base template (base.html) file.

Update your code to reflect the lines highlighted in yellow and save.

    <nav class="navbar navbar-expand-sm navbar-custom">
      <div class="container-fluid">
        <a class="navbar-brand" href="{{ url_for('index') }}">ROR</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="{{ url_for('index') }}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{{ url_for('contact') }}">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

Line [1] references the newly created styles.
Line [2] changes the string NAV to ROR (an acronym for Right-On-Realtors).

Run to view the changes. The output should be as follows:

Apply Styles to Headings

In this section, we will apply various styles to the <h2></h2> tags for each HTML page.

Navigate to and open the style.css file. Copy the code below to the clipboard. Paste this code to the bottom of the style.css file (CTRL+V) and save.

h2 {
    color: #1d2c59;
    font-family: 'Arial';
    text-align: center;
    padding-top: 40px;
}

Each style needs:

A name.
An opening and closing brace ({}).
A list of styles to be applied in the format shown above.

The snippet above applies the following styles to all <h2></h2> tags encountered throughout the website:

Line [1] changes the heading color (using a hex value).
Line [2] changes the font family.
Line [3] centers the heading horizontally.
Line [4] moves the page heading down said pixels.

Run to view the changes. The output should be as follows:

That’s looking much better!

Resize Input Box

On the Home page (index.html), you will notice that the width of the <input> tag is too much. Let’s correct this by applying a style called a class to the <form> tag.

Navigate to and open the style.css file. Copy the code below to the clipboard. Paste this code to the bottom of the style.css file (CTRL+V) and save.

.form-zip {
    width: 250px;
}

Next, navigate to and open the index.html file.

Update your code to reflect the line highlighted in yellow and save.

       <form action='/reports' method='POST' class="form-zip">
            <div class='form-group'>
                <input type='text' maxlength='5' class='form-control shadow-sm sm-white rounded' id='exampleFormControlInput1' 
                placeholder='Zip', name='zip_code'>  
            </div>
            <br/><br/>
            <button type='submit' class='btn btn-secondary'>Search</button>            
       </form>

A class (form-zip) was added to the tag, and the width of the <input> was adjusted accordingly.

Run to view the changes. The output should be as follows:

Apply Styles to Reports Page

Upon reviewing the Reports page, we notice the Zip Code heading is left-aligned, and the table appears squished. Let’s correct this by applying styles.

Navigate to and open the style.css file. Copy the code below to the clipboard. Paste this code to the bottom of the style.css file (CTRL+V) and save.

h3 {
    color: #6080bf;
    text-align: center;
}

table {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

th {
    font-size: 12px;
}

td {
    font-size: 12px;
    line-height: 1.9em;
    padding-right: 5px;
}

💡 Note: To practice CSS, try changing the options and re-run.

Run to view the changes. The output should be as follows:

💡 Note: To view any changes, Flask needs to be re-started. To perform this task, navigate to the command prompt and enter CTRL+C (stop), then flask run (re-start).

Summary

In this article, you learned how to:

Add a Stylesheet.
Apply styles to the Navbar.
Finally, apply styles to the HTML pages.

What’s Next

In Part 8 of this series, we will:

Set up the Contact page.
Apply styles to the page.
Email output from Form.