Styling the User Interface with FastAPI Static Files

Welcome to the second lesson of our course on building a story generation web application with FastAPI! In the previous lesson, you set up the foundational HTML structure for your application, organized the project layout, and created the main interface with tabs, forms, and containers. While the structure is in place, the application currently lacks visual appeal and usability.

In this lesson, you'll learn how to add styling to your application using FastAPI's approach to serving static files. Styling allows you to control the appearance of your HTML elements — such as colors, fonts, spacing, and layout — making your interface more attractive and user-friendly.

Let's start by setting up the basic page style for your application. This will ensure a consistent look and feel across your interface.

1. Set the Font-Family and Background Color

   Begin by defining the font family and background color for the entire page. In your Python project, you will write these styles in the style.css file, which is served as a static file.

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

   Here, the font-family property 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;
       flex-direction: column;
       align-items: center;
       min-height: 80vh;
   }

   The display: flex; enables flexbox, flex-direction: column; arranges content vertically, and align-items: center; centers content horizontally. min-height: 80vh; ensures the body takes up most of the viewport height.

Now, let's create a central white block to hold your content using the .container class.

1. Define the Container's Appearance

   Set the background color, padding, and border-radius to create a visually distinct container.

   .container {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
       max-width: 400px;
       background: white;
       padding: 30px;
       border-radius: 12px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   Here, background: white; sets the container's background color, padding: 30px; adds space inside the container, and border-radius: 12px; softens the corners. The box-shadow property adds a subtle shadow effect, enhancing the container's appearance. width: 100%; and max-width: 400px; ensure the container adapts to different screen sizes while maintaining a maximum width for readability.