For every Angular 2 component, we have a view that we manage. We can also say that for every view, there is a stylesheet to apply against it. Sometimes it can prove challenging to manage stylesheets and importing them into our view. Thankfully, Angular 2 gives support for injecting styles directly onto our view without interfering with other components. This is made possible with the Shadow DOM.

To utilize this new feature, simply make use of the styles or styleUrls metadata properties on your Component decorator. Here is an example of each use below:

@Component({
  selector: 'my-component',
  template: `<h1>Hello world!</h1>`,
  styles: ['h1 { color: red; }']
})
export class MyComponent {
    /* . . . */
}

Above, we are making the h1 tag in our template show as red text. However, unlike what we see in regular CSS files, the <h1> in our styles is only applied against the <h1> tag in our view. If you recall, this is because of the use of the Shadow DOM. Below is another example of how we can do this using URLs for our stylesheets.

@Component({
  selector: 'my-component',
  template: `<h1>Hello world!</h1>`,
  styleUrls: ['app/styles.css']
})
export class MyComponent {
    /* . . . */
}

Please be mindful that the URL used to locate your styles here should be relative to the application root and not your component! On most examples, the root of your project may be where the index.html file is located.

For more information on component styles, I suggest taking a deep look at the Official Tutorial on Component Styles by our friends at the Angular Team from Google.