Styling Recipe Detail Pages

Welcome back! So far, you have built the basic structure for your recipe detail page and learned how to display recipe information using TypeScript and Angular. Now, it’s time to make your page more visually appealing and easier to use. In this lesson, you will learn how to style your recipe detail view using Angular’s component-specific style files.

In Angular, each component can have its own style file that controls the appearance of its template. This allows you to change colors, fonts, spacing, and layout for just that component, making your page easier to read and more enjoyable for users.

By the end of this lesson, you will know how to use a component’s style file in Angular to style your recipe detail page.

Before we start styling, let’s quickly review what we have so far. In previous lessons, you created an Angular component for your recipe detail page and used TypeScript to display the recipe’s title, rating, ingredients, and steps.

Here’s a simplified example of what your Angular template might look like (you do not need to write this again, just remember):

<section class="recipe-container">
  @if (recipe) {
    <h1 id="recipe-title">{{ recipe.name }}</h1>
    <p id="rating-text" class="rating">{{ ratingText }}</p>
    <h2>Ingredients</h2>
    <ul id="ingredient-list">
      @for (ingredient of recipe.ingredients; track ingredient) {
        <li>{{ ingredient }}</li>
      }
    </ul>
    <h2>Steps</h2>
    <ol id="step-list">
      @for (step of stepList; track step) {
        <li>{{ step }}</li>
      }
    </ol>
    <div class="actions">
      <a id="guide-link" [routerLink]="['/guide', recipe.id]" class="start-btn">Start Cooking →</a>
    </div>
  } @else {
    <h1>{{ loading ? 'Loading...' : 'Recipe' }}</h1>
    @if (loading) {
      <p>Fetching recipe details...</p>
    }
    @if (!loading && error) {
      <p class="error">{{ error }}</p>
    }
  }
</section>

Right now, this page probably looks very plain. All the elements are there, but there’s no color, spacing, or special styling. This is where Angular’s component styles come in!

In Angular, each component can have its own style file, such as recipe.component.css. When you create a component, Angular automatically links this style file to the component’s template. This means any styles you add to recipe.component.css will affect only the RecipeComponent and not the rest of your app.

You do not need to manually link the style file — Angular takes care of this for you. Just add your style rules to recipe.component.css, and they will be applied to the template of your recipe detail page.

Let’s look at the style rules you will use to make your recipe page look great. We’ll go through each part step by step, showing how each rule appears in recipe.component.css and how it affects your Angular template.

.recipe-container {
  padding: 1rem;
}

This rule adds space inside the main container, so the content doesn’t touch the edges. In your Angular template, this means everything inside <div class="recipe-container"> will have some breathing room.

.recipe-container h1 {
  font-size: 2rem;
  margin-bottom: 0.25rem;
}

This rule makes the recipe title larger and adds a little space below it. In your template, the <h1>{{ recipe.title }}</h1> will stand out and look more like a page heading.

.rating {
  color: #888;
  margin-bottom: 1.5rem;
}

This rule makes the rating text a gray color and adds space below it. In your template, the <div class="rating">{{ recipe.rating }}</div> will appear less prominent, helping the title stand out more.

ul,
ol {
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}

ul li,
ol li {
  margin-bottom: 0.5rem;
}

These rules add space to the left of your ingredients and steps lists, and space below each item. In your template, the <ul> and <ol> elements, along with their <li> children, will be easier to read and better organized.

.actions {
  text-align: right;
  margin-top: 2rem;
}

.start-btn {
  background-color: #4caf50;
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.start-btn:hover {
  background-color: #45a049;
}

• The .actions rule moves the button to the right and adds space above it. In your template, the <div class="actions"> will align its content to the right.
• The .start-btn rule makes the button green, adds padding, rounds the corners, and makes the text bold and white. The <a class="start-btn">Start Cooking</a> will look like a real button.
• The .start-btn:hover rule changes the button color when you move your mouse over it, making it interactive.

When you add these style rules to your recipe.component.css file, your recipe detail page will look much more organized and pleasant. The title will stand out, the lists will be easy to read, and the button will look inviting and clickable — all within your Angular component.

In this lesson, you learned how to use a component-specific style file in Angular to style your recipe detail page. You saw how each style rule changes the look and feel of your component, making it more user-friendly and visually appealing.

Next, you will get a chance to practice applying and tweaking these styles yourself. You’ll see how small changes in your component’s style file can make a big difference in how your app looks. When you’re ready, move on to the practice exercises to try it out!