Inherit CSS from parent component in Angular Application

Question

I am building an application that I have to hard 'reset' all default CSS that is applied by browsers.

However, I'm having to copy/paste this in for each xxx.component.css because it doesn't appear to inherit any of the css from the baseline app.component.css.

Everything sits under the app.component.html template like so:

<div class="wrapper">
  <app-left-nav></app-left-nav>
  <app-top-nav></app-top-nav>
  <app-todo-section></app-todo-section>
  <app-details-section></app-details-section>
  <footer></footer>
</div>

Is there anyway to configure CSS inheritance in Angular? Should it be happening by default?

Here's a snippet of the 'Reset' code in the app.component.css:

html,
body,
div,
span,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

Am I doing something wrong? If code example is needed, let me know!

Answer 1

In angular each component has its own css. According to the angular 6 documentation this styling only applies for components. Angular achieves this by setting an attribute for every html element and on every css selector in a component. E.g.:

html

<nav _ngcontent-c2="" id="main-navigation">
  <ul _ngcontent-c2="">
    <li _ngcontent-c2="" routerlink="/dashboard" tabindex="0" ng-reflect-router-link="/dashboard"></li>
    <li _ngcontent-c2="" routerlink="/inbox" tabindex="0" ng-reflect-router-link="/inbox"></li> 
  </ul>
</nav>

css

#main-navigation[_ngcontent-c2] > ul[_ngcontent-c2] > li[_ngcontent-c2] {
    flex: 1;
    border-right: 1px solid rgb(240, 240, 256);
    text-align: center;
    cursor: pointer;
}

If you want to use styling that applies to all elements add it to the src/styles.css file. But even then it can be a bit tricky since angular adds in a html-tag for each component you add.