Use CSS isolation in ASP.NET Core MVC, Razor Pages, and Blazor
ASP.NET Core developers often store styling information for MVC views, Razor
Pages, and Razor Components into a style sheet file. The style sheet is then
applied to various pages using <link> HTML element. Although this works great in
many cases, at times you might want to isolate view / page / component specific
styling information into its own CSS file. Luckily, MVC views, Razor Pages, and
Razor Components support such CSS isolation. This article explains how.
CSS isolation in MVC applications
To begin, let's use this feature in ASP.NET Core MVC application. So, create
a new MVC application using Visual Studio.
Notice that I have picked ASP.NET Core 6 for this example.
Once the MVC project gets created go to the Views > Home folder. At this
stage, your Home folder will resemble this:
Right click on the Home folder and select Add > New Item to open the Add New
Item dialog.
Look for Style Sheet entry and specify the style sheet name to be
Index.cshtml.css. Following this naming pattern in important. Once the style
sheet gets added, Visual Studio will show it nested as shown below:
Open Index.cshtml.css and add the following CSS class:
.helloWorld{
font-family:Arial;
font-size:60px;
font-weight:bold;
color:blue;
}
Now open Index.cshtml view file and modify it as shown below:
<div>
<h1 class="helloWorld">Hello World!</h1>
</div>
As you can see, we have applied helloWorld CSS class to the <h1> element.
Next, open _Layout.cshtml file from under Views > Shared folder and add the
following markup in its <head> section.
<link rel="stylesheet" href="~/CssIsolationMvc.styles.css" />
All the individual view specific CSS files are bundled together into a CSS
file. The name of this CSS bundle follows this pattern:
<project_name>.styles.css
Therefore the href attribute points to this file.
If you run the project you should see this output:
CSS isolation in Razor Pages
CSS isolation in Razor Pages follows a similar line. To confirm this, create
a new Razor Pages application using Visual Studio.
Then expand its Pages folder to reveal Index razor page.
Now add a CSS file named Index.cshtml.css in the Pages folder and write this
CSS class in it:
.helloGalaxy{
font-family:Arial;
font-size:60px;
font-weight:bold;
color:red;
}
Your CSS will be shown nested like this:
Next, open the Index.cshtml file and apply the CSS helloGalaxy class as shown
below:
<div>
<h1 class="helloGalaxy">Hello Galaxy!</h1>
</div>
Finally, open the _Layout.cshtml page and place the <link> element as before.
<link rel="stylesheet" href="~/CssIsolationRazorPages.styles.css" />
You should get an output similar to this:
CSS isolation in Blazor apps
Now let's confirm the working of CSS isolation in a Blazor application.
Create a new Blazor Server App using Visual Studio.
Then expand the Pages folder to reveal Index.razor component. This time add
Index.razor.css file to the Pages folder.
Add the following class in the CSS file.
.helloUniverse{
font-family:Arial;
font-size:60px;
font-weight:bold;
color:green;
}
Then open Index.razor component and modify it to use the helloUniverse CSS
class.
@page "/"
<h1 class="helloUniverse">Hello Universe!</h1>
In Blazor apps you don't need to explicitly add any <link> element in the
_Host file because it is already added for you:
<link href="CssIsolationBlazor.styles.css" rel="stylesheet" />
Running the app will give this output:
Now check the HTML source of the page in the browser. You will see something
like this:
<h1 class="helloUniverse" b-drhhgu0uqa>Hello Universe!</h1>
As you can see the <h1> element has a unique b-drhhgu0uqa attribute added to
it.
Click on the application's CSS link at the top and the CSS class will be
revealed to you:
.helloUniverse[b-drhhgu0uqa]{
font-family:Arial;
font-size:60px;
font-weight:bold;
color:green;
}
So, helloUniverse CSS class is applied to an element only when it has
b-drhhgu0uqa attribute.
With this arrangement, multiple individual CSS files can safely have CSS
classes with the same name.
That's it for now! Keep coding!!