I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.
Code - a part of _Layout.cshtml:
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>@ViewData["Title"] - RazorTest</title><link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /><link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /><link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" /><link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" /></head><body><header><nav><div><img src="" alt=""><a href=""></a></div></nav></header><div class="container"><form action=""><input type="text"></form><main role="main" class="pb-3"> @RenderBody()</main></div><footer class="border-top footer text-muted"><div class="container">© 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a></div></footer>_Layout.chstml.css:
body { background-color: #444;}header { border: 10px solid red;}form { border: 10px solid cyan;}input { border: 10px solid greenyellow;}nav { border: 10px solid blue;}div { border: 10px solid black;}main { border: 10px solid green;}img { width: 100px; height: 100px; border: 10px solid orange;}Let me show that on SS's:_Layout.cshtml and _Layout.cshtml.css files
Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:
_Layout.cshtml and _Layout.cshtml.css files
Why styles for some tags are not working when added in scoped CSS file?