Working with Angular component styles

Angular has a unique way of isolating styles on components in our application by scoping CSS selectors to dynamically generated component selectors. This approach gives us component-level style isolation that will prevent our component's styles from leaking across the rest of our application.

Let's add some component styles to our /src/app/app.component.ts and /src/app/posts/posts.component.ts components. We'll give our header some padding between it and the blog content below it. Adding negative space to our user interface like this will make our blog content easier to read. We will frame the blog content itself with a border and a silver background color.

How to do it...

Let's follow the steps to create a simple component style for our PostsComponent:

1. First, we will add a <div> element around our router-outlet, our /src/app/app.component.html template:

<div>
  <router-outlet></router-outlet>
</div>

2. This will wrap our router...