Everything you should know about Styles in Angular
Tags: angular, shadowdom, viewencapsulation
Published: 2019-06-08 17:36:56

---
title: Everything you should know about Styles in Angular
published: true
description: All about angular.json ,global Styles, Component Styles, ViewEncapsulation and Shadow DOM
tags: Angular, Shadow Dom, ViewEncapsulation
---

###In this article we will talk about 
 1. __H__ow to add styles to components in Angular.
 2. Global styles in Angular. 
 3. __W__hat is _ViewEncasulation_ property and how does it effect the Component Styles.

So lets get Started!!!

### __Component Styles in Angular__
To understand this lets quickly create an angular application.
` > ng new StylesInNg`

Below is the `app.component.html` and its `css` file. To this component's `span` element, a blue color style is added.

![](https://thepracticaldev.s3.amazonaws.com/i/2vs9hlz2rb5ml6sgrbau.png)

Now lets add another component and do the same, except, instead of blue this time lets add red color.

![](https://thepracticaldev.s3.amazonaws.com/i/or1u8nnmhg3i3txskoni.png)

And this is how it looks in the Browser.

![](https://thepracticaldev.s3.amazonaws.com/i/v8gj4kibsneyqh8v6pxn.png)

See, the `app.component` header span element is blue in color and the `info.component` header span element is red in color. 
Now look into their styles in the same image. 
```html 

<style>header[_ngcontent-c0]   span[_ngcontent-c0]{
    color: blue;
}</style>

<style>header[_ngcontent-c1]   span[_ngcontent-c1]{
    color: red;
}</style>

<app-root _nghost-c0="" ng-version="6.1.10">
  <header _ngcontent-c0="">
    <span _ngcontent-c0="">This is the header</span>
  </header>
  <p _ngcontent-c0="">This is some paragraph</p>
  <app-info _ngcontent-c0="" _nghost-c1="">
    <header _ngcontent-c1="">
      <span _ngcontent-c1="">This is the header of Info Component</span>
    </header>
    <p _ngcontent-c1="">This is some paragraph in Info Component</p>
  </app-info>
</app-root>
```
Notice the attributes `_nghost-c0 , _ngcontent-c1`, that are present on the header, span elements and on their respective styles. These are attributes that angular uses to isolate component styles from one another. This is called as __Emulated Shadow DOM__. 

In summary, by __default__ all the elements of a component will have a specific attribute given by angular and the same attributes are set to their styles, thereby creating Style Isolation in components.

For a deeper dive on this you can look <a  href="https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975" target="_blank">here</a>.

### __G__lobal styles in Angular.

Any, .css or .sass style sheet added in the `styles[]` in angular.json is considered as a global style. By default, `styles.css` sheet is present in this array.

![](https://thepracticaldev.s3.amazonaws.com/i/cd1dhx6jv6w4u7ccwoy2.png) 

####Some points on Global styles.
1. You can use `@import` statements in styles.css to add styles sheets to global styles.
2. Adding style sheets in `styles[]` or in `styles.css` will make them global and there is no difference between these two.
3. Global styles do not have angular attributes attached to them unlike the component styles.
4. Component styles override the global styles.

### ViewEnapuslation.

Lets understand __ShadowDom__ first. Add a date element to `info.component` and open Chrome Dev Tools > Elements > Settings  and check the _Show user agent shadow dom_  option. Inspect the date element in the dev tools. 

<iframe src="https://giphy.com/embed/m9jU8q7hEbhNBbNxrJ" width="480" height="269" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/m9jU8q7hEbhNBbNxrJ">via GIPHY</a></p>

![](https://thepracticaldev.s3.amazonaws.com/i/qheitx704ezzhbgcf2nv.png)

Notice, `<input type="date">` element has a whole new DOM inside it, this is called Shadow dom. 

####_A parallel DOM created by the browser that encapsulates the markup, style, and behavior (DOM manipulation) of an HTML element._

Angular emulates the shadow dom concept, where it encapsulates the markup, style, and behavior of the component by default and this is called _Emulated_ type of encapsulation.


A component decorator contains a property called `encapsulation` that sets the `ViewEncapsulation` value.

There are three modes of encapsulation.

1.`ViewEncapsulation.Emulated`:[The default value] Angular creates a emulated shadow dom here and isolates the component styles. However, the components can still inherit the global styles in this mode.

2.`ViewEncapsulation.Native`:In this mode the component does not inherit the global styles and also the component styles are isolated.
  
3.`ViewEncapsulation.None`: In this mode the component styles become global and their is no more isolation.

Below is `app.component.html` code.

```html
<header>This is header</header>
<p>This is paragraph</p>
<app-content>
   <app-info></app-info>
</app-content>
```

Note, a component cannot inherit styles of its parent. In the above html code the `<app-content>` component can not inherit the styles of  `app.component` and also `<app-info>` component can not inherit the styles of `<app-content>` component