Spesso capita di aver la necessità di referenziare degli stili insieme ad un Component, per assegnare un layout grafico particolare ad una certa parte delle nostra applicazione.

In questo caso, Angular 2 ci viene in aiuto, consentendoci di sfruttare diverse modalità per inserire stili all'interno di un Component.

Possiamo definire gli stili in linea, in questo modo:

@Component({
  selector: 'myapp',
  template: `
    <h1>La mia app Angular 2</h1>`,
  styles: ['h1 { color: red; }']
})

E anche specificando direttamente il tag style:

@Component({
  selector: 'myapp',
  template: `
    <style>
      h1 {
        color: red;
      }
    <h1>La mia app Angular 2</h1>`
})

In questo caso, vale anche la regola dell'inclusione di un file CSS esterno mediamente il tag link.

Inoltre, possiamo referenziare un file con i CSS esterno, in questo modo:

@Component({
  selector: 'myapp',
  template: `
    <h1>La mia app Angular 2</h1>`,
  styleUrls: ['app/style.css']
})