Styling the Interface of the AI Short Story Generator

Welcome to the second lesson of our course on building an story generation web application with Flask! In our previous lesson, we created the HTML structure for our application, setting up the tabs, form elements, and containers that will make up our user interface. While the structure is in place, our application currently lacks visual appeal and usability.

In this lesson, we'll focus on styling our application using CSS (Cascading Style Sheets). CSS is a styling language that allows us to control the appearance of HTML elements, including colors, fonts, spacing, and layout. By adding CSS to our application, we'll transform the basic HTML structure into an attractive, user-friendly interface.

Remember that in a Flask application, static files like CSS are stored in a folder called static. We've already linked our CSS file in the HTML using the Flask url_for function:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

This tells Flask to look for a file named style.css in the static folder. Now, let's create this file and add our styles to it.

Let's start by setting up the basic page style using the body selector. This will ensure a consistent look and feel across our application.

1. Set the Font-Family and Background Color:

   Begin by defining the font family and background color for the entire page. We'll use 'Segoe UI' for a clean and modern look and a light gray background color for a subtle appearance.

   body {
       font-family: 'Segoe UI', sans-serif;
       background-color: #f4f4f4;
   }

   Here, font-family specifies the typeface, and background-color sets the page's background color.

2. Remove Default Margins and Add Padding:

   Next, remove the default margins and add padding to the body to ensure content is not flush against the edges.

   body {
       margin: 0;
       padding: 20px;
   }

   The margin: 0; removes any default spacing around the body, while padding: 20px; adds space inside the body.

3. Use Flex Layout for Centering Content:

   To center content both vertically and horizontally, use a flex layout. This will make the page more visually appealing and easier to navigate.

   body {
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
   }

   The display: flex; enables flexbox, justify-content: center; centers content horizontally, and align-items: center; centers content vertically. min-height: 100vh; ensures the body takes the full viewport height.