Modification off Index.cshtml file in asp .net core razor pages project

Question

can i add my custom css style in index.cshtml page keeping it default page as generated initially.i want to style the welcome body.i tried to write html and its rendering but when i made a .css file and tried to link that within html page then its not applying.i kept that .css inside wwwroot folder. i have also a head part inside html page .do it works like that?

this is my snap of index.cshtml.

please provide some idea if possible.

Answer 1

For security reasons you don't want to put styling directly in the CSHTML page. Malicious code can use that to hack your site and most CSPs (Content Security Policies) prohibit inline styling. Putting your styling in a CSS file is the correct approach.

I'm not sure I fully understand the issue you're having but I wonder if it is just a browser refresh/CSS priority issue. Put your custom styling into your site's CSS file that is already linked.

   .welcome {  
      font-size: 16px;  
   }  

Then apply the CSS class to your welcome body.

   <div class="welcome">  
   Welcome!!  
   </div>  

Load the site and force a refresh of the page (Ctrl+F5) to ensure the CSS styling is loaded. Then use the browser's developer tools (F12) to verify that the styling rules are being applied. Select the welcome body and view the Styles tab.

It is also within this tool where you can see if your custom CSS is being overwritten by other CSS that has higher priority. You can toggle and/or adjust the CSS rules in this window until it shows how you want. Then go back and adjust the CSS you've defined in your stylesheet.

As for the head element, this is metadata for the site and isn't rendered (only the body is). Within the head is where you put things like links to external files and metadata. The only "displayable" part is the title element. This element determines the title shown on the browser's title bar. You won't put any rendering elements inside head.

Answer 2

Hi @Arnab ,

Try to use F12 developer Network tools to check whether the CSS file load success or not?

Based on the screenshot, the style.css file was in the css folder, so the file path should like this:

According to your code and description, I create a sample, and the result like this:

Besides, if you are creating an Asp.net 6 web application, you could try to use the CSS Isolation to add the css tyle for the speciated page. Refer the following steps:

1. Create a Asp.net Core 6 Web Application.
2. Right click the Pages folder, and add a style file named “Index.cshtml.css”, then you can add the CSS style in the Index.cshtml.css file.

The result like this: as we can see that there is no need to add the CSS file (“Index.cshtml.css”) reference in the Index.cshtml page.

More detail information, see ASP.NET Core Blazor CSS isolation and CSS Isolation In Razor Pages.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Dillion

Answer 3

thanks sir ...love you sir..take a bow