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.