Chapter 2.3☕ 14 min read

Styles — Component Scoped vs Global

Angular styles are scoped by default — your component's style stays in your component.

01How Angular Handles Styles

In traditional web development, all CSS is global. If you write h1 { color: red; }, every <h1> on your entire website turns red.

Angular changes this completely. By default, component styles are scoped — they only affect the component they belong to. Your component's styles cannot "leak" into other components, and other components' styles cannot affect yours.

"Tumhara component ka style dusre component ko touch nahi karega." This is a superpower — it means you can write simple class names without worrying about conflicts.

02Component Styles (Scoped)

Component styles are defined using the styleUrl or styles property in @Component:

@Component({\n  selector: 'app-biryani',\n  styleUrl: './biryani.component.scss',  // 📁 Scoped styles\n  standalone: true\n})

How does Angular make styles scoped? It adds unique attributes to your HTML elements. When you write:

h1 { color: red; }

Angular transforms it to something like:

h1[_ngcontent-abc123] { color: red; }

This means the color: red only applies to <h1> elements inside this specific component.

"Component style = apne kamre ki paint — bahar ka kamra safe hai." Paint your room red, the living room stays white.

03Global Styles

Global styles are defined in the project's main styles file — typically src/styles.scss. These affect every component in the application.

What to put in global styles:

✅ Font definitions (@font-face, font families)
✅ CSS variables (:root { --primary: #dd0031; })
✅ Body/HTML resets and base styles
✅ Utility classes used across the app
✅ Animations and keyframes

"Global style = building ka colour — har kamre pe same."

Don't put component-specific styles in global styles. They'll start leaking and creating conflicts as your app grows.

04Style Preprocessors

Angular supports CSS preprocessors out of the box. When you create a new project with:

ng new my-app --style=scss

You get full SCSS/SASS support. No extra configuration needed.

SCSS features you'll use daily:

Variables: $primary: #dd0031; — reuse colors everywhere
Nesting: Write CSS selectors inside each other — mirrors HTML structure
Mixins: Reusable style blocks — like functions for CSS
Partials & @use: Split SCSS into small files, import what you need

"SCSS = CSS superpower — normal CSS ko steroids de diya."

Angular also supports LESS and Stylus, but they need extra configuration. Stick with SCSS — it's the industry standard.

05Best Practices

Here are the key rules to keep your styles maintainable:

Use SCSS, not plain CSS — variables, nesting, and mixins save you time
Component styles for component-specific design — each component minds its own business
Global styles only for fonts, color variables, resets — nothing component-specific
Use @use for SCSS imports — @import is deprecated and causes duplicate CSS
Keep specificity low — avoid deep nesting (max 3 levels)

"Variables global mein, component design component mein." This separation keeps your project organized as it grows to 50+ components.

Key Takeaways

✅ Component styles are scoped by default — they only affect that component.
✅ Angular adds unique HTML attributes like _ngcontent-abc123 to scope styles.
✅ Global styles (styles.scss) are for fonts, CSS variables, and resets only.
✅ SCSS is the recommended preprocessor — supports variables, nesting, mixins.
✅ Use @use for SCSS imports (not @import) — @import is deprecated.

Previous2.2 — Templates 📋 All Chapters Next Chapter2.4 — View Encapsulation →