Styling the Personal Tutor Interface with CSS

Welcome to the final lesson of our " Developing a Personal Tutor Web Application With Laravel " 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.

Linking the CSS File to Your HTML File

To style your personal tutor interface, we need to create a CSS file and link it to your HTML file. Create the CSS File : In the public/css directory, create a file named style.css . This file will contain all the styles for your application. Link the CSS File in HTML : Open your tutor.html file and add a <link> tag within the <head> section to link the CSS file: HTML <!DOCTYPE html> <html> <head> <title>Your Personal Tutor</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Header section... --> <!-- Suggestion buttons for common academic queries --> <!-- Chat container and input elements... --> <!-- Script functions... --> </body> </html> <!DOCTYPE html> <html> <head> <title>Your Personal Tutor</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Header section... --> <!-- Suggestion buttons for common academic queries --> <!-- Chat container and input elements... --> <!-- Script functions... --> </body> </html> The <link> tag references the CSS file using a path relative to the Laravel public directory (e.g., /css/style.css). In Laravel, all static assets such as CSS files are typically placed in the public directory, so referencing /css/style.css ensures that your styles are correctly loaded and applied to the HTML elements. This setup allows your personal tutor 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 /* Ensure html and body take full height and have no margin or padding */ html, body {height: 100%; 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;} /* Ensure html and body take full height and have no margin or padding */ html, body {height: 100%; 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;} 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.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

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

/* Style chat container to fill remaining space and center content */
#chat-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}

/* Ensure messages area scrolls if content overflows */
#messages {
    flex-grow: 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;
}

/* Style chat container to fill remaining space and center content */
#chat-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}

/* Ensure messages area scrolls if content overflows */
#messages {
    flex-grow: 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 #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 #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 between student questions and tutor responses.

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

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

/* Allow input field 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;
}

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

/* Allow input field 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;
}

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-session-btn ID provides a specific green background color for the new session button, making it visually distinct from the send button.