Angular Bileşen Stilleri

Şimdi HTML çıktımızı CSS ile şekillendirelim. Bunun için bize, bileşenin HTML çıktısı için CSS stillerinin yazıldığı app.component.css dosyası gerekecek. Aynı zamanda Angular, stillerin CSS modülü gibi çalışmasını kendisi sağlar. Bu, tüm seçicilerin sadece bileşenin HTML çıktısı için çalışacağı ve dışarıdaki HTML çıktısını etkilemeyeceği anlamına gelir.

Pratikte görelim. Bileşenimizde aşağıdaki gibi bir HTML çıktı olduğunu varsayalım:

app/app.component.html<div>
  abcde
</div>

Div'e bir renk verelim:

app/app.component.cssdiv {
  color: red;
}

Bu durumda, stilimizin sadece bizim bileşenimizdeki div'lere uygulanacağından ve başka hiçbir div'i etkilemeyeceğinden emin olabiliriz.