How do I change the CSS value directly in Blazor?

You can change the CSS value in the Blazor application by using the following options.

• Internal CSS
• Inline CSS
• Declare and assign a variable to the respective DOM element.

NOTE: In CSS, the “!important” rule is used to give a property more weightage, that is, it will override all the previous styling rules applied to that element for that specific property.

[Index.razor]

@page "/"

<style>
    .divStyle {
        font-family: 'Courier New';
        color: red !important;
    }
</style>

<div class="divStyle"> This is internal CSS styling. </div>
<div style="font-family: 'Times New Roman'; color: green !important;"> This is inline CSS styling. </div>
<div style="@styleInfo"> This CSS styling is applied by declaring a variable. </div>

@code {
    public string styleInfo = "font-family: 'Calibri'; color: blue !important;";
}

View Sample in GitHub