Styling Your Personal Tutor Web Application with CSS in Sinatra

Styling the Personal Tutor Interface with CSS

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

Setting Up the Public Directory in Sinatra

To style our personal tutor interface, we first need to create a directory for our static files, such as CSS. In Sinatra, static files are served from a directory called public by default. Create the Public Directory : In the root of your project, create a folder named public . This is where we'll store our CSS file. Place Your CSS File in the Public Directory : Any files placed in the public directory will be automatically served by Sinatra. You do not need to write any extra code to serve static files. Your project structure should look like this: your_project/ ├── app.rb ├── views/ │ └── tutor.erb └── public/ └── style.css your_project/ ├── app.rb ├── views/ │ └── tutor.erb └── public/ └── style.css Sinatra will automatically make files in the public directory available at the root URL path. For example, public/style.css will be accessible at /style.css .

Linking the CSS File to Your HTML Template

With the public directory set up, the next step is to create a CSS file and link it to your ERB template. Create the CSS File : In the public directory, create a file named style.css . This file will contain all the styles for your application. Link the CSS File in ERB : Open your tutor.erb file and add a <link> tag within the <head> section to link the CSS file: ERB <!DOCTYPE html> <html> <head> <title>Your Personal Tutor</title> <link rel="stylesheet" href="/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="/style.css"> </head> <body> <!-- Header section... --> <!-- Suggestion buttons for common academic queries --> <!-- Chat container and input elements... --> <!-- Script functions... --> </body> </html> The <link> tag uses a relative path (/style.css) to reference the CSS file in the public directory. This ensures that the styles are applied to the HTML elements. This setup allows your personal tutor interface to be styled effectively using the CSS rules defined in style.css .

Join the 1M+ learners on CodeSignal

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

your_project/
├── app.rb
├── views/
│   └── tutor.erb
└── public/
    └── style.css

ERB

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

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;
}

CSS

/* Center header text and add padding */
.header {
    text-align: center;
    padding: 10px;
}

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

/* Center header text and add padding */
.header {
    text-align: center;
    padding: 10px;
}

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

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;
}

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

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

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;
}

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;
}

CSS

/* Center header text and add padding */
.header {
    text-align: center;
    padding: 10px;
}

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

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;
}

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

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;
}

Styling the Personal Tutor Interface with CSS

Setting Up the Public Directory in Sinatra

Linking the CSS File to Your HTML Template

Join the 1M+ learners on CodeSignal

Styling the Basic Structure

Styling the Header and Suggestions Section

Styling the Chat Container and Messages

Styling the Input Section

Seeing the Difference: Interface Without and With CSS

Summary and Preparation for Practice