> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled/components-and-css-styling.md).

# Component's and CSS Styling

Angular Component Style Encapsulation Explained

In angular each component has its own style sheet and those rules will only apply to that component. This is called **Encapsulation.** Quick example<br>

{% tabs %}
{% tab title="foo.component.ts" %}

```typescript
Import { Component } from "@angular/core"; (

@Component({
  selector: "foo-component",
  templateURL: './foo.component.html'.
  styles: [ ['.header { background-color: black; }']]   
})
export class MyComponent {
   constructor(){}
}
```

{% endtab %}

{% tab title="bar.component.ts" %}

```typescript
Import { Component } from "@angular/core"; (

@Component({
  selector: "bar-component",
  templateURL: './bar.component.html'.
  styles: [['.header { background-color: green }']]   
})
export class MyComponent {
   constructor(){}
}
```

{% endtab %}
{% endtabs %}

**Lines 6:**  Of both foo.component.ts & bar.component.ts have the same **CSS class header** each with a different background  color,  ( black and green ); Despite both components having the same CSS class each component will have its CSS rules applied. In a normal webpage one would overwrite the other in the stylesheet.&#x20;