Welcome back! In the last few lessons, you built the structure and interactivity for your Cooking Helper landing page using Angular. Now, it’s time to make your app look clean, modern, and easy to use. In this lesson, you’ll learn how to add CSS styles to your landing page. Good styling helps users find what they need quickly and makes your app more enjoyable to use.

By the end of this lesson, you’ll know how to style the main sections and the search form of your Cooking Helper landing page. You’ll also see how small changes in CSS can make a big difference in how your app feels.

Let’s quickly remind ourselves of what you’ve built so far. You have a landing page with three main sections:

• A search area for finding recipes
• A section for popular recipes
• A section for a random recipe

You’ve already set up the Angular components and made the page interactive. Now, you’ll add CSS to these sections to improve their appearance. If you remember, your HTML might look something like this:

In this lesson, you’ll focus on styling these elements step by step.

Remember, this is the current file structure:

Let’s start by making the main sections stand out and look organized. You want each section to have some space below it so the page doesn’t look crowded.

To do this, you’ll add a CSS rule that targets the .search-section, .popular-section, and .random-section classes. Here’s how you can do it:

Explanation:

• This rule selects all three classes at once.
• margin-bottom: 2rem; adds space below each section. The rem unit is based on the root font size, so it scales well on different devices.

Next, let’s make the search form look more distinct from the rest of the page. You want the form to have a little space above it so it doesn’t stick to the top of the section.

Add this CSS rule for the .search-form class:

Explanation:

• This rule adds a small space above the search form.
• margin-top: 0.5rem; creates a gap between the top of the section and the form, making it look more balanced.

Now, let’s make the search input field easier to use and more visually appealing. You want the input to be wide enough, have some padding, and look clean.

Add this CSS rule for the text input:

Explanation:

• width: 100%; makes the input take up the full width of its container.
• max-width: 400px; prevents it from getting too wide on large screens.
• padding: 0.6rem; adds space inside the input, making the text easier to read.
• margin-top and margin-bottom add space above and below the input.
• border: 1px solid #ccc; gives the input a light gray border.
• border-radius: 4px; rounds the corners for a softer look.
• font-size: 1rem; makes the text inside the input easy to read.

Let’s make the search button look modern and interactive. Add these CSS rules for the button element:

Explanation:

• The button has a green background, white text, and rounded corners.
• On hover, the background becomes a slightly darker green.
• When disabled, the button turns a lighter green and the cursor changes to indicate it can’t be clicked.

To make your recipe lists look clean, add these rules for ul and li elements:

Explanation:

• Removes default list bullets and left padding.
• Adds spacing and a subtle border between list items.

If you display ratings, use this rule for the .rating class:

Explanation:

• Makes the rating text a neutral gray and adds a small space to the left.

To highlight the random recipe section, add this rule for .random-result:

Explanation:

• Adds space above, padding inside, a light background, and rounded corners for emphasis.

To make error messages stand out, use this rule for the .error class:

Explanation:

• Displays errors in a strong red color with a little space above.

In this lesson, you learned how to style the Cooking Helper landing page. You saw how a few lines of CSS can make your app look much more organized and user-friendly.

Next, you’ll get a chance to practice these styles in hands-on exercises. You’ll also continue to style more elements of your app in upcoming lessons, making your Cooking Helper even more polished and enjoyable to use. Keep up the great work!