Encapsulating CSS styling
We can define CSS styling within our components to better encapsulate our code and make it more reusable. In the Creating our first component section, we learned how to define CSS styles for a component 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/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 a document so that they may affect other elements of our application. To prevent this from happening, we can set up different levels of view encapsulation.
View encapsulation...
