How can style be applied to tag helpers in a ASP.NET Core Razor view?

Question

In a standard ASP.NET Core application say I have the following:

Model.cs

[Display(Name = "Foo")]
public string Foo { get;set; }

[Display(Name = "Bar")]
public string Bar{ get;set; }

Index.cshtml

    <div class="form-group">
        <div class="form-row">
            <div class="form-group col-sm-3">
                <label asp-for="Foo"></label><br />
                <label>@Model.Foo</label>
            </div>

            <div class="form-group col-sm-3">
                <label asp-for="Bar"></label><br />
                <label>@Model.Bar</label>
            </div>
        </div>
    </div>

Within site.css I have tried both of the following

label.bluetext{
    color: #3064b8; 
}

and

.bluetext{
    color: #3064b8; 
}

while applying the style like so

<label class="bluetext">@Model.Foo</label>

but I can't seem to get this to work with Razor tag helpers.

Answer 1

You could press F12 to open DevTools and check whether the custom styles are applied successfully in the Sources Tab -> css folder -> site.css.

If not, clear cache and reload the page.

Try to use asp-append-version="true" in your reference. It will append a version as a query string parameter which changes when the file is modified.

 <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>

You could also direcly add styles in Index.cshtml to make it

<style>
   label.bluetext {
      color:#3064b8;
   }
</style>