Style @Html.DisplayFor text with color in Razor view

Question

I'm trying to change the color of the output of a @Html.DisplayFor call. It's simple text. I've created css classes and tried to style it directly in the Razor view, but nothing is working. There is no issue with the model (it renders the correct text). There are many similar questions (one, two, three), but none of those solutions have worked for me. The initial attempt was within an <h3> tag, but I've tried outside it as well. Here's my attempts in the view (I've tried a few things...):

<h3>@Html.DisplayFor(model => model.Title, new { @class = "h3.link-colour;" })</h3>
@Html.DisplayFor(model => model.Title, new { @class = "h3.link-colour" })
@Html.DisplayFor(model => model.Title, new { @class = "link-colour"})
@Html.DisplayFor(model => model.Title, new { @class = "link-colour" })
@Html.DisplayFor(model => model.Title, new { @style = "color:#00BFFF" })
@Html.DisplayFor(model => model.Title, new { @style = "color:#00BFFF !important;" })

Relevant part of site.css here:

/* colour links */
a.link-colour {
    color: #00BFFF !important;
}

h3.link-colour {
    color: #00BFFF !important;
}

.link-colour {
    color: #00BFFF !important;
}

The css works for other aspects of the view. In the Views/Shared/_Layout.cshtml file, there is <link rel="stylesheet" href="~/css/site.css" />. I've been able to apply the technique of new { @class = "link-colour" } within a call to @Html.ActionLink in another view in this project, so I'm not sure what's going on. I've cleared the browser cache, too. Thanks for any ideas.

Answer 1

we can use the div around it and add class for div,

<div class="style">
@Html.DisplayNameFor(model => model.title)
</div>

and write styles for .style class, i don't know whether it's correct approach or not but it's working for me.