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

Question

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

What's the link tag look like rendered into the html when viewed in the browser? Does it include the tilde? — RonC
– RonC, Commented Nov 3, 2020 at 19:29

Yiyi You · Accepted Answer · 2020-11-03 03:23:10Z

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>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

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

Hi Yiyi, thanks for responding. I think you misunderstood my question. I have it working with the <style> tags, however I want to have this as part of my _Layout.cshtml so that I don't have to include this in every module.
I have updated my answer to put css into _Layout.cshtml,You can add <style></style> into <head></head>.
Got it. Not sure why I just can't add a .CSS file like the other ones, but as long as it works! Thanks.

marc_s · Accepted Answer · 2025-04-06 06:20:50Z

1

It seems that CSS file can't override styles used in bootstrap or other library.

Try this:

background: #48b9e5 !important;

edited Apr 6 at 6:20

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 31, 2020 at 13:36

Ahmed Zakaria

877 bronze badges

2 Comments

Val Over a year ago

Hi Ahmed, thanks for responding. Unfortunately that did not do the trick.

Val Over a year ago

Got it. so, if I want to override Bootstrap-specific styles, I have to include them in the _Layout file instead of linking in a .CSS file. Seems counter-intuitive, but if it works!

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related