This is the default strategy. Any style applied globally via HTML (not the parent component) as well as all the styles applied to a component will be reflected. In our case, if we target h3 and apply styles to style.css, app.component.css, and child.component.css, only style.css and child.component.css will be reflected.

The following CSS is the child component:

h3 {  color: palevioletred }

On running the preceding code, the result on the child component's view is as follows:

In cases where the same styles are applied to the same element on both the global styles and the component itself, the component styles supersede the global ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.