Inline vs external styles in Angular - Hands-On Comparison

Inline vs External Styles in Angular

📖 Scenario: You are building a simple Angular component to display a welcome message. You want to learn how to apply styles directly inside the component file (inline styles) and also how to use an external CSS file for styling.

🎯 Goal: Create an Angular standalone component named WelcomeComponent that shows a heading with the text "Welcome to Angular Styling!". First, apply inline styles to make the heading text blue and centered. Then, switch to using an external CSS file to style the heading with red color and italic font style.

📋 What You'll Learn

Create a standalone Angular component named WelcomeComponent

Use inline styles to color the heading text blue and center it

Create an external CSS file named welcome.component.css

Apply styles in the external CSS file to make the heading text red and italic

Switch the component to use the external CSS file instead of inline styles

💡 Why This Matters

🌍 Real World

In real projects, separating styles into external files helps keep code clean and easier to maintain. Inline styles are quick for small tweaks but external stylesheets are better for larger apps.

💼 Career

Understanding how to manage styles in Angular components is essential for frontend developers to build visually appealing and maintainable web applications.

1

Create the Angular component with inline styles

Create a standalone Angular component named WelcomeComponent with a template that contains an h1 heading showing the text "Welcome to Angular Styling!". Add inline styles inside the component decorator to make the heading text blue and center it using color: blue and text-align: center.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Styling!`,
  // Add inline styles here
})
export class WelcomeComponent {}

Need a hint?

Use the styles property in the @Component decorator to add inline CSS as a string array.

2

Create an external CSS file for styles

Create a CSS file named welcome.component.css in the same folder as the component. Inside this file, write CSS to style the h1 heading with color: red and font-style: italic.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Styling!`,
  styles: [
    `h1 { color: blue; text-align: center; }`
  ]
})
export class WelcomeComponent {}

/* Create welcome.component.css with styles for h1 */
/* Your code here */

Need a hint?

Create a file named welcome.component.css and add CSS rules for h1 inside it.

3

Link the external CSS file in the component

Modify the WelcomeComponent to remove the inline styles property and instead use the styleUrls property to link the external CSS file './welcome.component.css'.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Styling!`,
  // Replace inline styles with external styleUrls
})
export class WelcomeComponent {}

Need a hint?

Use the styleUrls property in the @Component decorator to link the external CSS file.

4

Add centering style in external CSS

Update the welcome.component.css file to add text-align: center to the h1 style so the heading text is centered along with the red color and italic style.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: `Welcome to Angular Styling!`,
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent {}

/* Update welcome.component.css to center text */
/* Your code here */

Need a hint?

Add text-align: center; inside the h1 CSS block in welcome.component.css.