Componentsbeginner
Component Styling Strategies
Compare the different ways to apply CSS to an Angular component and when to reach for each.
Angular gives you several ways to style a component — inline styles array, external styleUrls/styleUrl, global stylesheets, CSS preprocessors (Sass/Less), and CSS custom properties for theming — and interviewers ask about this to see if you can reason about trade-offs rather than just naming the options.
Component styles are like a chef's personal spice rack kept at their own station; global styles are the shared pantry everyone in the kitchen can reach; CSS custom properties are like a house recipe card pinned up that every station can read from, even though the ingredients themselves stay local.
Key Concepts
1
Inline styles (an array of template literal strings) is convenient for very small components where keeping CSS next to the TypeScript aids readability, while styleUrl (singular, since Angular 17 simplified the old styleUrls array for the common single-file case) is better once styles grow past a few rules, since it gets syntax highlighting, linting, and separate version-control diffs.
stylesstyleUrlstyleUrls
2
Global styles (in angular.json's styles array, typically styles.scss) are for truly app-wide concerns — resets, typography defaults, third-party library overrides — and deliberately bypass view encapsulation, which is both their purpose and their danger: overuse turns into the same unscoped CSS mess Angular's per-component scoping was designed to avoid.
angular.jsonstylesstyles.scss
3
A design-system-aware answer also mentions CSS custom properties (--my-var) declared on :host as the modern way to make a component's internals themeable from outside without breaking encapsulation or resorting to deprecated ::ng-deep.
--my-var:host::ng-deep