This site runs best with JavaScript enabled.

Scoped & Global Styles in Angular

First Published: May 5th, 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:

← Back to writing
Share article

I send emails about getting better at coding and life.

I'm on a path to become a better human and developer and I want to bring as many friends with me as possible. Want to join me? Sign up below. 👇

Sam Julien © 2020