Lesson 4
Styling the Chatbot Interface with CSS
Styling the Chatbot Interface with CSS

Welcome back! In the previous lesson, you enhanced your chatbot application by adding message suggestions, making it more user-friendly and efficient. Today, we will focus on styling the interface to make it visually appealing and professional. Styling is crucial in web applications as it enhances user experience by providing a clean and intuitive interface. We will use CSS to achieve this, ensuring that our chatbot not only functions well but also looks great.

Setting Up the Static Directory in FastAPI

To style our chatbot interface, we first need to create a directory for our static files, such as CSS. This directory will be mounted in our FastAPI application to serve these files.

  1. Create the Static Directory: Within the app directory, create a folder named static. This is where we'll store our CSS file.

  2. Mount the Static Directory in FastAPI: Update your main FastAPI application file to serve static files by mounting the static directory.

Here's a simplified example of how you can do it:

Python
1from fastapi import FastAPI
2from fastapi.staticfiles import StaticFiles
3
4# Initialize FastAPI app
5app = FastAPI()
6
7# Mount static files directory
8app.mount("/static", StaticFiles(directory="static"), name="static")

This code snippet demonstrates how to mount the static directory to serve static files. The app.mount method specifies the directory and the URL path where the static files will be accessible.

Linking the CSS File to Your HTML Template

With the static directory set up, the next step is to create a CSS file and link it to your HTML template.

  1. Create the CSS File: In the app/static directory, create a file named style.css. This file will contain all the styles for your application.

  2. Link the CSS File in HTML: Open your chat.html file and add a <link> tag within the <head> section to link the CSS file:

HTML, XML
1<!DOCTYPE html>
2<html>
3<head>
4    <title>Customer Service Chat</title>
5    <link rel="stylesheet" href="{{ url_for('static', path='/style.css') }}">
6</head>
7<body>
8    <!-- Header section... -->
9    <!-- Suggestion buttons for common queries -->
10    <!-- Chat container and input elements... -->
11    <!-- Script functions... -->
12</body>
13</html>

The <link> tag uses the url_for function to generate the correct URL for the CSS file, ensuring that the styles are applied to the HTML elements. This setup allows your chatbot interface to be styled effectively using the CSS rules defined in style.css.

Styling the Basic Structure

Now that we have our CSS file linked, let's start by styling the basic structure of our HTML elements. We'll focus on the html, body, and main container elements to set the foundation for our design.

In your style.css file, add the following styles:

CSS
1/* Ensure html and body take full height and have no margin or padding */
2html, body {
3    height: 100vh; /* Use full viewport height */
4    margin: 0;
5    padding: 0;
6}
7
8/* Set body as a flex container with a column layout and a modern font */
9body {
10    display: flex;
11    flex-direction: column;
12    font-family: Arial, sans-serif;
13}

These styles ensure that the html and body elements take up the full viewport height, with no margin or padding. The body is set to a flex container, allowing us to easily arrange its child elements in a column. The font-family property sets a clean and modern font for the entire application.

Styling the Header and Suggestions Section

Next, let's style the header and suggestions section to make them visually appealing and easy to interact with. In your style.css file, add the following styles:

CSS
1/* Center header text and add padding */
2.header {
3    text-align: center;
4    padding: 10px;
5}
6
7/* Use flexbox to center suggestion buttons and add spacing */
8.suggestions {
9    display: flex;
10    justify-content: center;
11    gap: 10px;
12    padding: 10px;
13}
14
15/* Style suggestion buttons with vibrant color and padding */
16.suggestion-btn {
17    background: #ff9800;
18    color: #fff;
19    padding: 8px 16px;
20    border: none;
21    cursor: pointer;
22}

The .header class centers the text and adds padding for spacing. The .suggestions class uses flexbox to center the suggestion buttons and adds a gap between them for better spacing. The .suggestion-btn class styles the buttons with a vibrant background color, white text, and padding for a comfortable click area.

Styling the Chat Container and Messages

Let's style the chat container and messages to ensure they are responsive and user-friendly. Add the following styles to your style.css file:

CSS
1/* Style chat container to fill remaining space and hide overflow */
2#chat-container {
3    display: flex;
4    flex-direction: column;
5    flex: 1;          /* Fill available space */
6    max-width: 800px;
7    width: 100%;
8    margin: 0 auto;
9    overflow: hidden; /* Prevent chat container itself from scrolling */
10}
11
12/* Ensure messages area scrolls if content overflows */
13#messages {
14    flex: 1;         /* Fill available space in chat container */
15    margin: 10px;
16    border: 1px solid #ccc;
17    padding: 10px;
18    overflow-y: auto;
19}
20
21/* Add spacing and padding to individual messages */
22.message {
23    margin: 10px 0;
24    padding: 8px;
25}
26
27/* Align user messages to the right */
28.user {
29    text-align: right;
30}
31
32/* Align assistant messages to the left */
33.assistant {
34    text-align: left;
35}

The #chat-container is styled as a flex container that fills the available space, with a maximum width to ensure it is centered and responsive. The overflow: hidden property prevents the container itself from scrolling. The #messages element is styled to fill the available space in the chat container and allows scrolling when messages overflow, with a border and padding for a neat appearance. The .message class adds spacing and padding to individual messages, while the .user and .assistant classes align messages to the right and left, respectively, for clear differentiation.

Styling the Input Section

Finally, let's style the input section to ensure it is functional and visually consistent with the rest of the interface. Add the following styles to your style.css file:

CSS
1/* Use flexbox for input container with spacing */
2.input-container {
3    display: flex;
4    gap: 5px;
5    margin: 10px;
6}
7
8/* Allow input field to grow and fill available space */
9.input-wrapper {
10    flex-grow: 1;
11}
12
13/* Style message input field with full width, padding, and border */
14#message-input {
15    width: 100%;
16    padding: 8px;
17    border: 1px solid #ccc;
18}
19
20/* Style all buttons with padding, color, and background */
21button {
22    padding: 8px 16px;
23    color: #fff;
24    background: #1976d2;
25    border: none;
26    cursor: pointer;
27}
28
29/* Style new chat button with a specific background color */
30#new-chat-btn {
31    background: #2e7d32;
32}

The .input-container class uses flexbox to arrange input elements with a gap for spacing. The .input-wrapper class allows the input field to expand and fill available space. The #message-input ID styles the input field with full width, padding, and a border. The button selector styles all buttons with padding, text color, background color, and cursor properties. The #new-chat-btn ID provides a specific background color for a new chat button.

Summary and Preparation for Practice

In this lesson, you learned how to style your chatbot interface using CSS. We set up a static directory in FastAPI to serve static files and linked a CSS file to your HTML template. We then styled the basic structure, including the header, suggestions, chat container, messages, and input section, to create a visually appealing and user-friendly interface.

As you move on to the practice exercises, focus on experimenting with different styles to achieve your desired look and feel. This hands-on practice will deepen your understanding and help you create a professional-looking interface.

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.