[SOLVED] I can't get my CSS File to Load in my Razor Pages (ASP.Net Core)

I can't get my CSS File to Load in my Razor Pages (ASP.Net Core)

I have the following syntax in my _Layout.cshtml:

<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/lib/datatables/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href="~/lib/font-awesome/css/all.css" rel="stylesheet" />
    <link href="~/lib/jqueryui/jquery-ui.css" rel="stylesheet" />
    <script src="~/lib/tinymce/tinymce.min.js"></script>
    <link href="~/content/site.css" rel="stylesheet" />
</head>

I can see the ~/content/site.css in the Page Source but the styles isn't being applied. The site.css only has one entry as follows:

.table-hover tbody tr:hover td {
    background: #48b9e5;
}

If I manually add the style to my Razor Page via the tag it works just fine. What am I missing?

--- Val

Solution

Here is a demo:

Tasks.cshtml(You need to put css between <style></style>):

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
    </tbody>
</table>

Here is my _Layout.cshtml:
Here is html of Tasks.cshtml: Here is Network of Tasks.cshtml: result: