Scoped CSS

The application has everything it needs. The last thing we need to do is add some styles. We have the option of defining styles in the src/styles.css file. This is what we did in the last project.

There’s an alternative approach you may want to consider, which uses the component CSS. Every component comes with its CSS files. The app component has the app.component.css file, and the post component has the post.component.css file.

The main benefit of defining styles in the component CSS files is that the styles are scoped. What does this mean? It means that the styles will only affect the template in the component.

For example, in the post.component.html template, we have a <img> tag. If we were to add an img selector in the app.component.css file, the properties wouldn’t affect the post component’s template.

img {
  width: 200px;
  height: 200px;
}

We can use the Chrome Developer Tools to inspect the element’s CSS properties.