Estilos del componente Angular

Ahora vamos a estilizar nuestro markup mediante CSS. Para esto nos será útil el archivo app.component.css, en el cual se escriben los estilos CSS para el markup del componente. Al mismo tiempo, Angular mismo se encarga de que los estilos funcionen como módulos CSS. Esto significa que todos los selectores funcionarán solo para el markup del componente y no capturarán el markup exterior.

Veamos en la práctica. Supongamos que en nuestro componente tenemos el siguiente markup:

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

Vamos a asignar un color al div:

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

Al mismo tiempo, podemos estar seguros de que el estilo se aplicará solo a los divs de nuestro componente, y a ningún otro.