Scoped & Global Styles in Angular

First Published: May 05, 2020

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:

Subscribe to the Developer Microskills Newsletter

Each week I send a practical, actionable way to improve as a dev and dev advocate. No BS, no hand-waving, but with some fun thrown in for good measure. Sign up and I'll send you the Tiny Experiments framework and worksheet. It's a simple process to help you finish what you start.

Sam Julien © 2015 - Present