Welcome back! In the last lesson, you learned how to create a custom 404 error page for your Cooking Helper frontend. Now, we will take that page and make it look much more inviting and professional by adding some CSS styles.

A 404 page is what users see when they try to visit a page that doesn’t exist. If it looks plain or confusing, users might get frustrated and leave your site. By styling your 404 page, you help users feel comfortable and guide them back to the main parts of your site. This is a small detail, but it makes your Cooking Helper frontend feel polished and user-friendly.

In this lesson, you will learn how to use a CSS file to style your 404 page, making it both attractive and easy to use.

Let’s quickly remember what we did in the previous lesson. You created a custom 404 page using HTML and Flask. This page shows a clear message when someone visits a page that doesn’t exist, and it includes a button to take users back to the homepage.

Now, we want to make this page look better by adding styles. We will do this by creating and editing a CSS file called 404.css and connecting it to our 404 page.

The CSS file for our 404 page is named 404.css. In most web projects, CSS files are stored in a folder called cooking_helper/static/css. This is where browsers look for stylesheets.

Here’s how the file is organized in your project:

The 404.css file contains all the styles that will be applied to your 404 page. In your HTML template for the 404 page, you should already have a line that links this CSS file, like this:

This line tells the browser to load the styles from 404.css and apply them to the 404 page.

Let’s break down the CSS in 404.css step by step. We’ll look at each part and see how it changes the look of your 404 page.

The first part of the CSS is for the main container that holds all the content on the 404 page. This container uses the class .error-container.

• text-align: center; centers all the text inside the container.
• padding: 3rem 1rem; adds space inside the container, making sure the content doesn’t touch the edges of the page. 3rem is the space at the top and bottom, and 1rem is the space on the left and right.

This makes the page look clean and balanced.

Next, we style the main heading, which usually says something like “404 - Page Not Found”.

• font-size: 2.5rem; makes the heading large and easy to see.
• color: #c0392b; gives the heading a strong red color, which grabs attention.
• margin-bottom: 1rem; adds space below the heading so it doesn’t touch the next line.

The next part styles the paragraph that explains the error.

• font-size: 1.2rem; makes the text a bit larger than normal, so it’s easy to read.
• margin-bottom: 1.5rem; adds space below the paragraph, separating it from the button.

Finally, we style the button that lets users go back to the homepage. This button uses the class .back-home.

• display: inline-block; makes the button fit nicely with the text.
• background-color: #4caf50; gives the button a green background.
• color: white; makes the text on the button white, so it stands out.
• padding: 0.6rem 1.2rem; adds space inside the button, making it easier to click.
• border-radius: 4px; rounds the corners of the button for a softer look.
• text-decoration: none; removes the underline from the link, so it looks like a button.

We also want the button to change color when someone hovers over it. This makes it feel interactive.

• When you move your mouse over the button, the background color changes to a slightly darker green (#45a049). This gives feedback to the user and makes the button feel more responsive.

In this lesson, you learned how to use CSS to make your 404 error page look friendly and professional. You saw how to center the content, style the heading and message, and make the “Back Home” button stand out with color and a hover effect.

Now, you’re ready to practice these skills on your own. In the next exercises, you’ll get hands-on experience editing the 404.css file and seeing how your changes affect the 404 page.

Congratulations on reaching the end of this course! You’ve built a Cooking Helper frontend that not only works well but also looks great — even when something goes wrong. Well done!