Estilos de Componente Angular

Vamos agora estilizar nosso markup com CSS. Para isso, usaremos o arquivo app.component.css, onde são escritos os estilos CSS para o markup do componente. O Angular cuida para que os estilos funcionem como módulos CSS. Isso significa que todos os seletores funcionarão apenas para o markup do componente e não afetarão o markup externo.

Vamos ver na prática. Suponha que nosso componente tenha o seguinte markup:

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

Vamos definir uma cor para a div:

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

Com isso, podemos ter certeza de que o estilo será aplicado apenas às divs do nosso componente, e não a quaisquer outras.