Inline vs external styles in Angular

Introduction

Styles make your app look nice. You can add styles directly inside components or in separate files. Both ways help you control how things appear.

You want quick small style changes just for one component.

You want to keep styles organized and reusable across many components.

You want to separate design from logic for easier maintenance.

You want to share styles between different parts of your app.

You want to reduce clutter inside your component code.

Syntax

Angular

/* Inline styles in Angular component */
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Hello!</p>`,
  styles: [`p { color: blue; }`]
})
export class ExampleComponent {}

/* External styles in Angular component */
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {}

Inline styles go inside the @Component decorator using the styles array.

External styles are placed in separate CSS files and linked with styleUrls.

Examples

This example shows inline styles directly inside the component for quick styling.

Angular

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

@Component({
  selector: 'app-inline',
  template: `<h1>Hi</h1>`,
  styles: [`h1 { font-size: 2rem; color: green; }`]
})
export class InlineComponent {}

This example uses an external CSS file for styles, keeping the component code clean.

Angular

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

@Component({
  selector: 'app-external',
  templateUrl: './external.component.html',
  styleUrls: ['./external.component.css']
})
export class ExternalComponent {}

The external CSS file contains styles that apply to the component's template.

Angular

/* external.component.css */
p { color: red; font-weight: bold; }

Sample Program

This component shows both inline styles for the <h2> and external styles for the <p> tag. Inline styles are quick for small changes. External styles keep CSS organized.

Angular

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

@Component({
  selector: 'app-style-demo',
  template: `
    <h2>Inline Styled Title</h2>
    <p>This paragraph uses external styles.</p>
  `,
  styles: [`h2 { color: purple; font-family: Arial, sans-serif; }`],
  styleUrls: ['./style-demo.component.css']
})
export class StyleDemoComponent {}

/* style-demo.component.css */
p {
  color: teal;
  font-size: 1.2rem;
  font-style: italic;
}

Important Notes

Inline styles are good for small, component-specific tweaks.

External styles help keep your code clean and styles reusable.

Angular supports both, so choose what fits your project needs.

Summary

Inline styles go inside the component decorator using styles.

External styles live in separate CSS files linked with styleUrls.

Use inline for quick changes, external for organized and reusable styles.