Improving Application Appearance

Welcome to the second lesson of our course on building a story generation web application with Django! 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 Django application, static files like CSS are stored in a folder called static. We've already linked our CSS file in the HTML using the Django {% static %} template tag:

<link rel="stylesheet" href="{% static 'style.css' %}">

This tells Django 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.

   CSS

   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.

   CSS

   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.

   CSS

   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.

Now, let's create a central white block to hold our 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.

   CSS

   .container {
       background: white;
       padding: 30px;
       border-radius: 12px;
   }

   Here, background: white; sets the container's background color, padding: 30px; adds space inside the container, and border-radius: 12px; softens the corners.

2. Add Depth with Box-Shadow:

   Apply a box-shadow to give the container a sense of depth and separation from the background.

   CSS

   .container {
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }

   The box-shadow property adds a subtle shadow effect, enhancing the container's appearance.

3. Ensure Responsiveness:

   Set the container's width to 100% and limit the maximum width to 600px for a responsive design.

   CSS

   .container {
       width: 100%;
       max-width: 600px;
   }

   This ensures 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.

   CSS

   .tabs {
       display: flex;
       justify-content: center;
       margin-bottom: 20px;
   }

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

2. Style the Tab Buttons:

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

   CSS

   .tab-button {
       padding: 10px 20px;
       margin: 0 10px;
       background-color: #007bff;
       color: white;
       border: none;
       cursor: pointer;
       transition: background-color 0.3s;
   }

   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, and transition specifies that every change to the background must be done in 0.3 seconds.

3. Add Hover Effect:

   Apply a change of background color, triggering the 0.3s transition, in the hover state to enhance interactivity.

   CSS

   .tab-button:hover {
       background-color: #0056b3;
   }

   The :hover pseudo-class changes the background color on hover, providing visual feedback to users.

Next, we'll 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.

   CSS

   input, select {
       width: 80%;
       padding: 10px;
       margin-top: 10px;
       border: 1px solid #ccc;
       border-radius: 5px;
   }

   The width: 80%; ensures enough width while having space for padding and margin, 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.

   CSS

   button {
       padding: 10px 20px;
       margin-top: 10px;
       background-color: #007bff;
       color: white;
       border: none;
       cursor: pointer;
   }
   
   button:hover {
       background-color: #0056b3;
   }

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

Finally, let's add styles for media display areas, including #story-container, #history-container

1. Media Display Areas Position:

   We will add a top margin to separate these containers from other content.

   CSS

   #story-container, #history-container {
       margin-top: 20px;
   }

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

2. Story Display Section:

   In the future a pre element will be used to display the story. We will define the style of it:

   CSS

   pre {
       max-width: 100%;
       overflow-x: auto;
       text-align: left;
       padding: 10px;
       background-color: #f9f9f9;
       border-radius: 5px;
       box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
       white-space: pre-wrap;
       word-break: break-word;
       box-sizing: border-box;
   }

   First, we ensure the element does not overflow by setting max-width and overflow-x. Then, we align the text to the left with text-align and ensure we position it correctyle with padding. Finally, we enhance the look of the element with background-color, border-radius, box-shadow, white-space, word-break and box-sizing

In this lesson, we covered essential CSS techniques to style the interface of our AI Short Story Generator web application. We defined basic page styles, created a responsive container, implemented a tab navigation system, styled form elements, and enhanced media display areas. These skills are crucial for creating visually appealing and user-friendly web applications. Now, it's time to apply these techniques in the practice exercises that follow. Remember, practice is key to mastering these concepts, so take your time and experiment with different styles to see how they affect the overall look and feel of your application.