CSS Isolation allows each Blazor component to have its own scoped stylesheet — styles that apply only to that component and won't leak out to affect other elements.

How It Works

Create a CSS file with the same name as your component plus .css:

• Component: Counter.razor
• Scoped styles: Counter.razor.css

Blazor automatically generates a unique attribute (like b-xyz123) and adds it to the component's HTML, then scopes the CSS selectors to match.

Counter.razor.css Example

h1 {
    color: purple;
    font-size: 2rem;
}

button {
    background-color: #512bd4;
    color: white;
    border-radius: 4px;
    padding: 8px 16px;
}

Deep Selectors

To style child components from a parent's scoped CSS, use the ::deep combinator:

::deep .child-element {
    font-weight: bold;
}

Global Styles

Non-isolated global styles go in wwwroot/css/app.css. Use scoped CSS for component-specific styles.

Reference:

Wikipedia: CSS

https://en.wikipedia.org/wiki/CSS