Angular - 2-9 Working with component styles

Templates are not the only thing Angular lets you configure per component — styles work in exactly the same way. Imagine we want the header inside app.component.html to switch to a dark blue. The easiest way is to open the matching app.component.css file referenced by the component and write standard CSS in there, just as we would in any other web page.

h3 {
  color: darkblue;
}

The instant we save the file, the Angular dev server rebuilds the bundle, the page reloads and the h3 headings appear in dark blue. That demonstrates how styleUrls in the component decorator wires an external stylesheet into the component. Notice the property is plural and uses an array: a single component can reference several CSS files at once if you want to split rules across multiple sheets.

Inline styles versus styleUrls

Just like with templates, Angular also accepts inline styles. The decorator exposes a styles property that takes an array of CSS strings. Backticks make it convenient to write multi-line rules inline:

  • styleUrls: ['./app.component.css'] — keep CSS in its own file.
  • styles: [`h3 { color: darkblue; }`] — embed CSS directly in the TypeScript class.
  • Both options live on the @Component decorator and either can be omitted if the component has no styling.

The choice between the two is the same trade-off as for templates. Tiny rules can stay inline so the whole component lives in one place, while anything substantial belongs in a separate CSS file for readability and tooling support. Either way, Angular applies view encapsulation behind the scenes so that the rules you write only affect the host component — a topic we will dive into in a later lesson.

Summary

This lesson demonstrates how to style Angular components using external CSS files. The `styleUrls` property, which accepts an array of stylesheet references, allows you to define component-specific styles that override base HTML element styles. Changes made in the component's CSS file are immediately reflected in the application, and multiple stylesheets can be combined for a single component.

Key points

  • Use the component's CSS file (referenced in styleUrls) to define and manage component-specific styles
  • The styleUrls property is an array, enabling references to multiple external stylesheets unlike templateUrl which references a single template
  • Override base HTML element styles (e.g., H3) by writing standard CSS rules in the component's stylesheet
  • Component styles are scoped to the component and automatically applied when the application is saved and reloaded
  • Multiple style files can be referenced for a single component for better organization and reusability

FAQ

What is the difference between styleUrls and templateUrl in Angular components?

styleUrls is an array property that can reference multiple external stylesheets, while templateUrl is a string that references a single template file. This allows components to combine styles from multiple files.

Can I override HTML base element styles in a component's CSS file?

Yes. You can select base elements like H3 and apply custom CSS properties. For example, you can override the base H3 style with a custom color like dark blue.

Why is styleUrls defined as an array instead of a single string?

styleUrls is an array to support referencing multiple external stylesheets for a single component, allowing you to organize and combine styles from different sources.