Welcome back! So far, you have built a step-by-step cooking guide page using a TypeScript framework and made it interactive with component logic. Now, it’s time to make your guide look polished and user-friendly. In a component-based framework, the appearance and layout of your page are managed directly within each component’s structure. This means that both the logic and the look of your guide are organized together, making it easier to maintain and customize.

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

• Understand what each part of the component’s style file does.
• Make simple changes to the look and feel of your guide page by editing the component’s style file.
• Recognize how component-based styling helps users navigate and enjoy your site.

Let’s get started!

In a Angular component-based framework, each page or feature is built as a component. Each component can have its own dedicated style file, which defines how elements inside that component are displayed. This approach keeps styles and logic together, making it easier to see how changes affect your page.

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

The main container for the guide is defined with a class called .guide-container in the component’s style file:

• The container’s width is limited to 600 pixels, which keeps the content from stretching too wide and makes it easier to read.
• The container is centered horizontally on the page.
• Padding is added inside the container so the content doesn’t touch the edges.

All of these adjustments apply only within the guide component, keeping the layout consistent and focused.

The main heading of the guide uses a rule for h1 in the component’s style file:

• This adds space below the main heading, so it doesn’t stick to the next element.
• The spacing is applied only to headings inside the guide component, keeping the layout clean.

Each step in your guide is wrapped in an element with the .step-box class, styled in the component’s style file:

• Each step has a light gray background, making it stand out from the rest of the page.
• Padding adds space inside the box, and rounded corners give it a softer look.
• Space is added below each step to separate them visually.

These styles help users focus on one step at a time.

Navigation buttons are grouped inside an element with the .step-controls class. The component’s style file includes rules for both the container and the buttons:

• The controls are laid out in a row with space between them, making navigation easy.
• Each button is styled to be bold, green, and easy to click.
• When a button is disabled, it turns gray and the cursor changes to indicate it can’t be clicked.

All of these styles are scoped to the guide component, so they won’t affect other parts of your application.

To help users see keyboard shortcuts, the component’s style file includes rules for .keyboard-hint and kbd:

• The keyboard hint text is smaller and gray, and centered below the controls.
• The kbd element is styled to look like a real keyboard key, making shortcuts easy to spot.

These styles help users discover and remember helpful shortcuts.

The timer display uses the .timer-box class, styled in the component’s style file:

• The timer stands out with a yellow background and a border.
• Padding and rounded corners make it visually distinct and easy to notice.

This helps users keep track of timing during their cooking steps.

In this lesson, you learned how styles and layout are managed within the Angular component for your cooking guide page. You saw how each rule in the component’s style file affects the appearance and usability of your guide. By making small changes to the style file, 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 component’s style file to make your guide unique and user-friendly.

In the next unit, you'll add keyboard shortcuts and a rating system to make your cooking guide even more user-friendly.