CSS doesn't work in ASP.NET Core Razor Pages

Question

Hello,

CSS doesn't work in ASP.NET Core Razor Pages. Could you please help me?

I attached the sample project in OneDrive. (here)

namespace WebApplication6
{
     public class Program
     {
          public static void Main(string[] args)
          {
               var builder = WebApplication.CreateBuilder(args);
               builder.Services.AddRazorPages();

               var app = builder.Build();

               if (!app.Environment.IsDevelopment())
               {
                    app.UseExceptionHandler("/Error");
                    app.UseHsts();
               }

   
               app.UseHttpsRedirection();
               app.UseStaticFiles();
               app.UseRouting();
               app.UseAuthentication();
               app.MapRazorPages();

               app.Run();
          }
     }
}

@page
@model WebApplication6.Pages.ToQueryStringModel
@{
}
<h3 class="test">Binding!</h3>
<div class="card-grid">
     <div class="caption">Title</div>
     <div class="value">data</div>
     <div class="caption">Title</div>
     <div class="value">data</div>
</div>

@{      Layout = "_Layout"; }

@using WebApplication6
@namespace WebApplication6.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Answer 1

I found the problem. the name of _ViewStartS.cshtml was wrong. _ViewStart.cshtml is true.

Answer 2

Hi there, I see that in your razor page, there's nowhere where you reference the styles..

---

Above the general block

@{

}

You need to have something like this:

@section Styles {
	<link rel="stylesheet" href="[~/location_of_your_css_file]" />
}

Answer 3

Here are some ways to provide styles

• Add the styles in wwwroot/css/site into a .css file which is global to all pages
• Add a style sheet file under wwwroot/lib and add a link tag to Pages/Shared/_Layout.cshtml
• Use CSS isolation as in my article with code sample.
• Place a link tag at the top or bottom of the desired page for the style sheet file.
• See Microsoft docs
• Lastly, you can check if a style sheet is loaded in any web browser developers tools.

Answer 4

CSS should work if it is properly included in the page. if you say "CSS doesn't work." It probably means that CSS in not properly included in the page. Therefore, I suggest that you use the developer tool of browser to see if CSS is included.