How do I use different CSS files in Blazor pages?

In Blazor, there are three ways to use different CSS files on different pages.

1. Use inline <style></style> tag to define the custom styling for the page.

2. Include a new CSS file in the page by using a JavaScript interop in the OnInitialized method.

[script.js]

function includeCss() {
     var element = document.createElement("link");
     element.setAttribute("rel", "stylesheet");
     element.setAttribute("type", "text/css");
     element.setAttribute("href", "css/external.css");//location of the css that we want     include for the page
     document.getElementsByTagName("head")[0].appendChild(element);
}

[index.razor]

@page “/”

<h1>Blazor Application</h1>

@code{
    protected override async void OnInitialized()
    {
        await JSRuntime.InvokeAsync<object>("includeCss");
     }
    }

3. Usedirect links of the CSS file via the <link> HTML element with its local or online reference in the href attribute.

<link href="StyleSheet.css" rel="stylesheet" />