0Pricing
Angular Academy · Lesson

Component-Scoped Styles

Keep styles local to a component.

Styles Belong to Components

Angular lets each component carry its own CSS. By default these styles are scoped, meaning they only affect that component template and not the rest of the page.

Inline styles Array

You can define styles inline in the @Component decorator using the styles array.

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

All lessons in this course

  1. Component-Scoped Styles
  2. View Encapsulation Modes
  3. Host and Host-Context Styling
  4. Dynamic Classes and Styles
← Back to Angular Academy