Why do AppComponent styles propagate to \ other components?

Question

css

AppComponent (HTML)

<header>
    <div class="router">
        <router-outlet></router-outlet>
    </div>
</header>

`
AppComponent (CSS)

header {
    text-align: justify;
    letter-spacing: 1px;
    height: 8em;
    padding: 2em 10%;
    background: deepskyblue;
    color: black;
}

Why does the h1 tag get "color: black" in another component?

Answer 1

color is an inherited property. In this example, div.router is a child element, so it gets the computed value of this property from its parent (header).