Welcome back! In the last lesson, you learned how to create a custom 404 error page for your Cooking Helper frontend using Angular. 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 an Angular component called NotFoundComponent. This component displays 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 editing the component-specific CSS file called not-found.component.css and connecting it to our 404 page through Angular’s component system.

The CSS file for our 404 page is named not-found.component.css. In Angular projects, each component can have its own CSS file, which is stored in the same folder as the component’s TypeScript and HTML files.

Here’s how the files are organized in your project:

The not-found.component.css file contains all the styles that will be applied to your 404 page. In Angular, this CSS file is automatically linked to the NotFoundComponent, so you don’t need to add any extra code to connect the styles.

Let’s break down the CSS in not-found.component.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 in your Angular component 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 not-found.component.css file and seeing how your changes affect the 404 page in your Angular application.

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!