CSS Isolation in Razor Components

Blazor allows us to style our applications by using standard Cascading Style Sheets (CSS) syntax. Since Blazor uses HTML in its components, we can use CSS in Blazor the same way we can use it on a standard HTML website. Blazor also has a concept of CSS isolation, which is about applying CSS to only specific Razor components.

We will cover CSS isolation with the help of the following project setup. It represents a standard Blazor WebAssembly project template. However, it contains sufficient examples of CSS isolation to explain the concept.