Styling the components using CSS

CSS is a web utility that allows us to change the look and feel of our elements. In this section, we will deep dive into the different ways supported by Blazor with which we can add CSS styles to our components.

In Blazor apps, we have four different ways to style our components:

• Global styles
• Isolated styles (scoped)
• Inline styles
• Embedded styles

Isolated styles

Blazor provides us with a powerful way to style our components by keeping the styles separated from each other. This means small, clean styles, scoped for each component.

To reference the isolated styles, you need to add a link tag with a reference using the syntax {AssemblyName}.styles.css.

Let’s get started using isolated styles to style our BookCard component:

1. Create a CSS file in the same folder of the BookCard component following the convention {ComponentName}.razor.css – in our case, BookCard.razor.css. This will make Visual...