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.

   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.

   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.

   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.

   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.

Let's style the tab navigation system using the .tabs and .tab-button selectors.

1. Set Up the Tabs

   Use flexbox to align the tabs and add spacing below them.

   The display: flex; and justify-content: center; center the tabs, while gap: 10px; and margin-bottom: 20px; add space between and below the tabs.

2. Style the Tab Buttons

   Define the appearance of the tab buttons, including padding, margin, background color, and text color.

   Here, padding and margin control spacing, background-color and color define the button's appearance, and cursor: pointer; changes the cursor to a pointer on hover. border-radius and transition add smoothness and rounded corners.

Next, style the form elements, including inputs, selects, and buttons.

1. Style Inputs and Selects

   Ensure inputs and selects use full width with appropriate padding and borders.

   The width: 100%; ensures full width, padding adds space inside, and border and border-radius define the appearance.

2. Style the Button

   Define the button's appearance, including background color, text color, and hover state.

   The button selector styles the button, and the :hover pseudo-class changes the background color on hover.

Finally, add styles for media display areas, including #story-container and #history-container.

1. Add Margins to Containers

   Add a top margin to separate these containers from other content.

   The margin-top: 20px; adds space above the containers.

2. Style Preformatted Text

   If you display stories or history in a preformatted block, you can style it for better readability.

In this lesson, you learned how to apply interface styling techniques to your AI Short Story Generator web application using FastAPI's static file serving. You defined basic page styles, created a responsive container, implemented a tab navigation system, styled form elements, and enhanced media display areas. These skills are essential for building visually appealing and user-friendly web applications with FastAPI. Now, it's time to apply these techniques in the practice exercises that follow. Remember, experimenting with different styles will help you understand how each change affects the overall look and feel of your application.