ASP.NET Core Razor Pages _Layout.cshtml.css not applied

Question

I stumbled around a Problem with the CSS file _Layout.cshtml.css. Well, the short and quick description, the CSS class 'footer' is not applied. Other CSS classes like 'border-top' and 'text-center' do work just fine. But footer class is just not applied or broken. Also, I tried to use @RenderSection("footer", required: false) but that also just did nothing. For testing purpose, I renamed the CSS class to something like my-test and only set text-align: center; but the text is not centered.

The last two days, I googled about how to make the footer sticky on the bottom, since it is always on top. Doesn't matter what I tried, the CSS class footer never got applied. Also, other changes to _Layout.cshtml.css are not reflected. I can make a sticky footer on the bottom of the site, with centered text, by mixing class and style tags within the _Layout.cshtml file. But that bugs me out. Why can't I use the _Layout.cshtml.css file and the CSS class footer to adjust the layout? What do I miss here?

The Result should look something like this: But without the need to mix .css and HTML style tag.

I tried the following edits:

Added @RenderSection("footer", required: false)

Defining the 'footer' class in the footer:

Defining the 'footer' class in a div element:

Defining a CSS class for centering the text:

Added @await RenderSection("footer", required: false) and used 'my-test' as CSS class to center the text on a div element:

Answer 1

Do you want something like below ?

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    text-align: center;
}

html:

 <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2023 - areacore - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>

result:

Answer 2

1. In _Layout.cshtml make sure your link tag has a correct name in href (I encountered this myself after renaming my project name. rename YourProjectNameHere with your project name!):

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

2. If it still didn't applied yet, after the 1st step try to clean and rebuild solution and then check it again. with this step compiler's generated strings for styles and HTML tags (that you can see in the inspector) will probably going to be the same.