Styling the Personal Tutor Interface with CSS in Django

Welcome to the final lesson of our "Developing a Personal Tutor Web Application With Django" course! In the previous lesson, you enhanced your personal tutor application by adding query suggestions, making it more user-friendly and efficient for students. Today, we will complete our application by focusing on styling the interface to make it visually appealing and professional. Styling is crucial in educational web applications, as it enhances the learning experience by providing a clean and intuitive interface. We will use CSS to achieve this, ensuring that our tutor application not only functions well but also looks great.

To style our personal tutor interface, we first need to create a directory for our static files, such as CSS. Django provides a built-in static files system that makes it easy to manage and serve these files.

1. Create the Static Directory: Inside your Django app directory (for example, project/tutor/), create a folder named static. This is where you'll store your CSS file.

2. Configure Static Files in Django: Make sure your Django settings include the following configuration for static files (these are usually set by default):

# settings.py

STATIC_URL = '/static/'

Django's static files system allows you to organize and serve CSS, JavaScript, and image files efficiently. By placing your CSS file in the static directory, you ensure that it can be easily referenced in your templates.

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

1. Create the CSS File: In your app's 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 tutor.html template and add the following lines at the top of the file to load static files and link your CSS:

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Your Personal Tutor</title>
    <link rel="stylesheet" href="{% static 'style.css' %}">
</head>
<body>
    <!-- Header section... -->
    <!-- Suggestion buttons for common academic queries -->
    <!-- Chat container and input elements... -->
    <!-- Script functions... -->
</body>
</html>

The {% load static %} tag enables the use of static file references in your template. The <link> tag uses {% static 'style.css' %} to generate the correct URL for your CSS file, ensuring that the styles are applied to your HTML elements.

Below, we’ll break down the CSS of your style.css file into logical sections, explaining the purpose and effect of each part.

Start by ensuring the page takes up the full viewport height and uses a modern font. The body is set as a flex container with a column layout, which helps in structuring the main sections vertically.

/* Ensure html and body take full height using 100vh and have no margin or padding */
html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* Set body as a flex container with a column layout and a modern font */
body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

The header is styled to be visually distinct, centered, and padded, with a subtle background color to separate it from the rest of the content.

/* Style the header with center alignment, padding, and background color */
.header {
    text-align: center;
    padding: 10px;
    background-color: #f5f5f5;
}

The suggestions section uses flexbox to center the suggestion buttons and add spacing between them. The buttons themselves are styled to be vibrant and inviting.

/* Use flexbox to center suggestion buttons and add spacing */
.suggestions {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

/* Style suggestion buttons with vibrant color and padding */
.suggestion-btn {
    background: #ff9800;
    color: #fff;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}

The chat container is set up as a flex column, centered on the page, and responsive. It uses a maximum width for readability and hides overflow to keep the layout clean.

/* Style chat container as a flex column, centered and responsive with no overflow */
#chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

The messages area is given a border, padding, and scrollable overflow to handle long conversations. Each message is spaced and padded for readability.

/* Style messages area with border, padding, and scrollable overflow */
#messages {
    flex: 1;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 10px;
    overflow-y: auto;
}

/* Add spacing and padding to individual messages */
.message {
    margin: 10px 0;
    padding: 8px;
}

/* Align user messages to the right */
.user {
    text-align: right;
}

/* Align assistant messages to the left */
.assistant {
    text-align: left;
}

The input section uses flexbox for layout, with spacing between elements. The input field is styled to fill available space, and buttons are styled for consistency and usability.

/* Use flexbox for input container with spacing */
.input-container {
    display: flex;
    gap: 5px;
    margin: 10px;
}

/* Allow input wrapper to grow and fill available space */
.input-wrapper {
    flex-grow: 1;
}

/* Style message input field with full width, padding, and border */
#message-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
}

/* Style all buttons with padding, color, and background */
button {
    padding: 8px 16px;
    color: #fff;
    background: #1976d2;
    border: none;
    cursor: pointer;
}

/* Style new session button with a specific background color */
#new-session-btn {
    background: #2e7d32;
}

When no CSS is applied, the interface appears plain and unstructured. All elements — headers, buttons, chat messages, and input fields — use default browser styles. This results in a basic layout with minimal spacing, inconsistent fonts, and no visual hierarchy. Buttons and input fields look generic, and the overall experience feels less engaging and less professional. Let's visualize an example:

After applying the provided CSS, the interface transforms into a visually appealing and user-friendly environment. The header is centered and stands out, suggestion buttons are vibrant and inviting, and the chat container is neatly organized with clear separation between user and assistant messages. The input section is well-aligned and easy to use, and the entire application adopts a consistent font and color scheme. These enhancements not only make the application look modern and professional but also improve usability and the overall learning experience. Here's how it looks now:

In this lesson, you learned how to style your personal tutor interface using CSS. We set up a static directory in Django to serve static files and linked a CSS file to your HTML template. We then applied a comprehensive set of styles to the header, suggestions, chat container, messages, and input section, creating a visually appealing and user-friendly educational 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 that enhances the tutoring experience for students.