Encapsulating CSS styling
To better encapsulate our code and make it more reusable, we can define CSS styling within our components. In the Configuring a component section, we learned how to define CSS styles to a component either using an external CSS file through the styleUrls property or by defining CSS styles inside the TypeScript component file with the styles property.
The usual rules of CSS specificity govern both ways:
https://developer.mozilla.org/en/docs/Web/CSS/Specificity
CSS management and specificity become a breeze on browsers that support Shadow DOM, thanks to scoped styling. CSS styles apply to the elements contained in the component, but they do not spread beyond their boundaries.
On top of that, Angular embeds style sheets at the head of the document so that they might affect other elements of our application. To prevent this from happening, we can set up different levels of view encapsulation. In a nutshell, encapsulation is the way that Angular needs...