Live Chat Icon For mobile
Live Chat Icon

How do I use different CSS files in Blazor pages?

Platform: Blazor| Category : General, Tips and Tricks

In Blazor, there are three ways to use different CSS files in 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.


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

@page “/”

<h1>Blazor Application</h1>

    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" />

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.