---
title: ASP.NET Core Blazor CSS isolation
author: guardrex
description: Learn how CSS isolation scopes CSS to Razor components, which can simplify CSS and avoid collisions with other components or libraries.
monikerRange: '>= aspnetcore-5.0'
ms.author: riande
ms.custom: mvc
ms.date: 11/12/2024
uid: blazor/components/css-isolation
---
# ASP.NET Core Blazor CSS isolation
[!INCLUDE[](~/includes/not-latest-version.md)]
By [Dave Brock](https://twitter.com/daveabrock)
This article explains how CSS isolation scopes CSS to Razor components, which can simplify CSS and avoid collisions with other components or libraries.
Isolate CSS styles to individual pages, views, and components to reduce or avoid:
* Dependencies on global styles that can be challenging to maintain.
* Style conflicts in nested content.
## Enable CSS isolation
To define component-specific styles, create a `.razor.css` file matching the name of the `.razor` file for the component in the same folder. The `.razor.css` file is a *scoped CSS file*.
For an `Example` component in an `Example.razor` file, create a file alongside the component named `Example.razor.css`. The `Example.razor.css` file must reside in the same folder as the `Example` component (`Example.razor`). The "`Example`" base name of the file is **not** case-sensitive.
`Example.razor`:
```razor
@page "/example"
Scoped CSS Example
```
`Example.razor.css`:
```css
h1 {
color: brown;
font-family: Tahoma, Geneva, Verdana, sans-serif;
}
```
**The styles defined in `Example.razor.css` are only applied to the rendered output of the `Example` component.** CSS isolation is applied to HTML elements in the matching Razor file. Any `h1` CSS declarations defined elsewhere in the app don't conflict with the `Example` component's styles.
> [!NOTE]
> In order to guarantee style isolation when bundling occurs, importing CSS in Razor code blocks isn't supported.
## CSS isolation bundling
CSS isolation occurs at build time. Blazor rewrites CSS selectors to match markup rendered by the component. The rewritten CSS styles are bundled and produced as a static asset. The stylesheet is referenced inside the `` tag ([location of `` content](xref:blazor/project-structure#location-of-head-and-body-content)). The following `` element is added to an app created from the Blazor project templates:
:::moniker range=">= aspnetcore-9.0"
Blazor Web Apps:
```html
```
Standalone Blazor WebAssembly apps:
```html
```
:::moniker-end
:::moniker range="< aspnetcore-9.0"
```html
```
:::moniker-end
The `{ASSEMBLY NAME}` placeholder is the project's assembly name.
:::moniker range="< aspnetcore-8.0"
The following example is from a hosted Blazor WebAssembly **:::no-loc text="Client":::** app. The app's assembly name is `BlazorSample.Client`, and the `` is added by the Blazor WebAssembly project template when the project is created with the Hosted option (`-ho|--hosted` option using the .NET CLI or **ASP.NET Core Hosted** checkbox using Visual Studio):
```html
```
:::moniker-end
Within the bundled file, each component is associated with a scope identifier. For each styled component, an HTML attribute is appended with the format `b-{STRING}`, where the `{STRING}` placeholder is a ten-character string generated by the framework. The identifier is unique for each app. In the rendered `Counter` component, Blazor appends a scope identifier to the `h1` element:
```html
```
The `{ASSEMBLY NAME}.styles.css` file uses the scope identifier to group a style declaration with its component. The following example provides the style for the preceding `
` element:
```css
/* /Components/Pages/Counter.razor.rz.scp.css */
h1[b-3xxtam6d07] {
color: brown;
}
```
At build time, a project bundle is created with the convention `obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.css`, where the placeholders are:
* `{CONFIGURATION}`: The app's build configuration (for example, `Debug`, `Release`).
* `{TARGET FRAMEWORK}`: The target framework (for example, `net6.0`).
* `{ASSEMBLY NAME}`: The app's assembly name (for example, `BlazorSample`).
## Child component support
CSS isolation only applies to the component you associate with the format `{COMPONENT NAME}.razor.css`, where the `{COMPONENT NAME}` placeholder is usually the component name. To apply changes to a child component, use the `::deep` [pseudo-element](https://developer.mozilla.org/docs/Web/CSS/Pseudo-elements) to any descendant elements in the parent component's `.razor.css` file. The `::deep` pseudo-element selects elements that are *descendants* of an element's generated scope identifier.
The following example shows a parent component called `Parent` with a child component called `Child`.
`Parent.razor`:
```razor
@page "/parent"
Parent component
```
`Child.razor`:
```razor
Child Component
```
Update the `h1` declaration in `Parent.razor.css` with the `::deep` pseudo-element to signify the `h1` style declaration must apply to the parent component and its children.
`Parent.razor.css`:
```css
::deep h1 {
color: red;
}
```
The `h1` style now applies to the `Parent` and `Child` components without the need to create a separate scoped CSS file for the child component.
The `::deep` pseudo-element only works with descendant elements. The following markup applies the `h1` styles to components as expected. The parent component's scope identifier is applied to the `div` element, so the browser knows to inherit styles from the parent component.
`Parent.razor`:
```razor
Parent
```
However, excluding the `div` element removes the descendant relationship. In the following example, the style is **not** applied to the child component.
`Parent.razor`:
```razor