Scoped & Global Styles in Angular

This week in the Angular Basics egghead collection we’re talking about styling.

In other frameworks, CSS modules and CSS-in-JS (sometimes referred to as JSS) are both quite popular. I’ve actually become a huge fan of using styled components in React (I’m using them with Emotion on this site!).

One of the reasons for this is the ability to add scoped styling to your app. This prevents inadvertently overwriting styles due to a shared global class somewhere. You won’t hear much about these options in the Angular community, though, and that’s because Angular comes with a scoped CSS option right out of the box. In this lesson, I’ll show you how this works.

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.

Here’s the code for both of these lessons: