
Learning Angular
By :

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 styleUrl
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
Thanks to scoped styling, CSS management, and specificity become a breeze on browsers that support Shadow DOM. CSS styles apply to the elements contained in the component, but they do not spread beyond their boundaries.
You can find more details about Shadow DOM at https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM.
On top of that, Angular embeds style sheets at the <head>
element of a web page so that they may affect other elements of our application. We can set up different...