Styling Your Personal Tutor Web Application with CSS in Sinatra

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.

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.

1. Create the Public Directory: In the root of your project, create a folder named public. This is where we'll store our CSS file.

2. 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

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.

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

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

2. 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:

<!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.