We can define styles for our HTML elements and class names through the styles property in the component decorator, like this:

@Component({
  selector : 'my-component',
  styles : [`
    p {
      text-align: center;
    }
    table {
      margin: auto;
    }
  `]
})
export class ExampleComponent {}

This property will take an array of strings, each containing CSS rules, and apply them to the template markup by embedding those rules at the head of the document as soon as we bootstrap our application. We can either inline the styling rules in a single line, or take advantage of ES2015 template strings to indent the code and make it more readable, as depicted in the preceding example.