ASP.NET Core 5.0 : MVC, Razor Pages, Web API, EF Core, Blazor, Design Patterns, and more. Private online coaching for software developers. Click here for more details.

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!!


Bipin Joshi is an independent software consultant, trainer, author, yoga mentor, and meditation teacher. He has been programming, meditating, and teaching for 24+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 17 May 2021


Tags : ASP.NET ASP.NET Core MVC .NET Framework Visual Studio Components


Subscribe to our newsletter

Get monthly email updates about new articles, tutorials, code samples, and how-tos getting added to our knowledge base.

  

Receive Weekly Updates