Angular features a couple of view encapsulations, which provide support for Shadow DOM. The available modes are ViewEncapsulation.Native, ViewEncapsulation.Emulated, and ViewEncapsulation.None; the default is Emulated.
In Native and Emulated modes, what this means is that a style file is isolated only to the component that references the style in its styleUrls list. So any styles that you defined in app.component.css will only apply to AppComponent and not to its ancestors or the their siblings. Component styles also do not automatically apply to child components unless you use shadow-piercing.
To correct your problem, one thing you could do is to change the view encapsulation on your component to None. Any styles in this component will now leak out to the rest of the page. Example:
@Component({
selector: 'app-component',
encapsulation: ViewEncapsulation.None
})
export class AppComponent {}
The other thing to do would be to place shared styles outside of Angular in the main page. If you're using the Angular CLI, you can add styles to the styles property in the .angular-cli.json configuration file.