Welcome back! So far, you have built a step-by-step cooking guide page using Flask and made it interactive with JavaScript. Now, it’s time to make your guide look polished and user-friendly. This is where CSS (Cascading Style Sheets) comes in.

CSS is the language used to style web pages. It controls how your HTML elements look — things like colors, spacing, fonts, and layout. Good styling makes your page easier to read and more enjoyable to use. In this lesson, you will learn how to use and adjust the provided CSS to improve your cooking guide.

By the end of this lesson, you will know how to:

• Understand what each part of the provided CSS does.
• Make simple changes to the look and feel of your guide page.
• Recognize how CSS helps users navigate and enjoy your site.

Let’s get started!

Before we dive into the details, let’s quickly remind ourselves how CSS fits into your Flask project.

In your Flask app, you have an HTML template for the cooking guide. In a previous lesson, you learned how to link a CSS file to your HTML using a line like this in your template:

This line tells the browser to load the guide.css file from your static/css folder. Any styles defined in this file will be applied to your HTML elements.

Let’s look at the main parts of the guide.css file and see what each section does. We’ll go step by step, focusing on one idea at a time.

The first class you’ll see is .guide-container. Here’s how it looks:

• max-width: 600px; keeps the content from stretching too wide, making it easier to read.
• margin: 0 auto; centers the container on the page.
• padding: 1rem; adds space inside the container so the content doesn’t touch the edges.

Next, the h1 selector:

• This adds space below the main heading, so it doesn’t stick to the next element.

The .step-box class styles each step in your guide:

• background-color: #f4f4f4; gives each step a light gray background.
• padding: 1.25rem; adds space inside the box.
• border-radius: 8px; rounds the corners for a softer look.
• margin-bottom: 1.5rem; adds space below each step.

The .step-controls and .step-controls button classes style the navigation buttons:

• .step-controls uses display: flex; to lay out the buttons in a row with space between them.
• Each button is styled to be bold, green, and easy to click.

There’s also a style for disabled buttons:

• Disabled buttons turn gray, and the cursor changes to show they can’t be clicked.

The .keyboard-hint and kbd styles help users see keyboard shortcuts:

• .keyboard-hint makes the hint text smaller and gray.
• kbd gives keyboard keys a special look, like a real keyboard key.

Finally, the .timer-box class:

• This style gives the timer a yellow background and a border, making it stand out from the rest of the content.

In this lesson, you learned how CSS styles your cooking guide page and how to read and adjust the provided guide.css file. You saw how each class affects the layout, colors, and usability of your guide. By making small changes, you can quickly see how your page’s appearance improves.

Now, you are ready to practice customizing your own guide page. In the next exercises, you’ll get hands-on experience editing the CSS to make your guide unique and user-friendly.

Congratulations on reaching the end of this course! You have built a complete, interactive, and well-styled cooking guide. Great job, and keep experimenting with your new skills!