Angular Basics
Add Global Styles in Angular
Even though the default scoped styles in Angular components are really useful, sometimes we do want to apply styles across the whole app. We may also want to make classes available globally. Luckily, Angular provides a nice way to do this in the styles.css file.
Sam Julien: [0:00] The styles that you add to this array of styles in the component decorator will be scoped to the individual component. They won't be available globally in your application. What about styles or classes that we do want scoped globally and made available across our application?
[0:20] Angular provides an option for that. I'm going to hide the browser really quick and open up the file explorer. Down here is styles.css. It's right at the src folder here. I can close the app folder. Right at the src folder is this styles.css and that's where you can add global styles.
[0:42] Let's open back up the browser. Let's say that I want to change our body so that the font-family is Arial and make the font-size 16 pixels. When I save that, you can see that now the entire application has changed.
[0:59] I can also make classes globally available here. What if I want to define a class called container and I'm going to say that the margin is going to be 20 pixels and the max-width is going to be 600 pixels? Then I can go over to our app component and I'll just add a <div> of class "container." Then close that over here and save it to style.
[1:29] You can see that our app pops into the container that we've defined. If I open the browser full size and then inspect this <div>, you can see that we now have that class of "container" on this <div>.
[1:46] This is a really simple way that Angular gives you to add global styles in addition to using the scoped styles that you normally use in components.