ASP.Net Core Razor global styles documentation

Question

ASP.Net Core Razor global styles documentation

Sam of Simple Samples 5,466

Where is the ASP.Net Core Razor documentation explaining how to reset a global CSS style to the HTML default style?

Razor uses Bootstrap for CSS and I might can find documentation (or at least articles) explaining how to reset a global CSS style to the HTML default style but I do not know if Razor has a different procedure for doing that. Whether it does nor does not, is there any relevant Razor documentation, at least something saying to use the relevant Bootstrap documentation?

I see Introduction to Razor Pages in ASP.NET Core. That thoroughly explains CSS isolation but says nothing about global styles. Since it is written as a tutorial it is reasonable for it to mention Bootstrap.

For me, I want to reset the size to the default for HTML. The font size in Bootstrap is:

--bs-body-font-size: 1rem;

Correct? And the rem size determines many other sizes, correct? I want to know where the documentation is that explains how to reset that size to the HTML default size.

Zhi Lv - MSFT 21,706 Reputation points Microsoft Vendor

2022-01-21T06:49:25.92+00:00

Hi @Sam of Simple Samples ,

The Asp.Net core document doesn't have much description about the using the bootstrap style. We can know that the default template will using Bootstraps in the Layout page. You could submit a feedback by clicking the button in the official document:

And if you want to add custom global CSS style, you can add them in the wwwroot\css\site.css file.

Best regards,
Dillion
Sam of Simple Samples 5,466 Reputation points

2022-01-21T09:11:35.813+00:00

Thank you. I did consider submitting feedback and it helps to get verification that that would be appropriate.

I did just now discover that if I add font-size: 14px; to the html style in the wwwroot\css\site.css file then that does reduce the font size. The article that helped me is What Are the Bootstrap 4 Text Font Sizes and How Do You Change Them? 2022 - Bootstrap Creative. Probably people experienced with Bootstrap and ASP.Net Core would say it is obvious that that should work but it was not obvious to me. When I searched for answers I just got very confused; I found stuff implying I had to re-compile stuff just to change the style. Microsoft tends to document stuff using tutorials and this is the type of thing that should be in a tutorial of ASP.Net Core Web Apps generated by VS (and/or the dotnet command).
Sam of Simple Samples 5,466 Reputation points

2022-01-22T23:21:44.283+00:00

I posted feedback for Introduction to Razor Pages in ASP.NET Core and it was immediately closed; see Styling · Issue #24708 · dotnet/AspNetCore.Docs.

And changing the font-size in the site.css file is not enough; I need to change (reset) the font (font family) and that is not easy to determine how. I sure do not see how to do that in the site.css file.
Zhi Lv - MSFT 21,706 Reputation points Microsoft Vendor

2022-01-25T06:02:55.057+00:00

Hi @Sam of Simple Samples

And changing the font-size in the site.css file is not enough; I need to change (reset) the font (font family) and that is not easy to determine how. I sure do not see how to do that in the site.css file.

From your description, it seems that you have found the right direction to solve the problem, whether the problem have been solved? If not, you can refer this sample to set the font-family in the site.css file:

Best regards,
Dillion
Sam of Simple Samples 5,466 Reputation points

2022-01-25T06:58:48.457+00:00

No, nothing yet has accomplished what I wanted. I should have clarified my question so that it asks about the application that VS generates. I find no relevant documentation of that. I thought that changing the font size would be enough but it is not. I eventually decided to just remove Bootstrap from the application; that was easier to do than expected. The relevant Microsoft personnel think they do not need to provide any assistance and I disagree so that makes it difficult to decide what the answer is.

Zhi Lv - MSFT 21,706 Reputation points Microsoft Vendor

2022-01-21T06:49:25.92+00:00

Hi @Sam of Simple Samples ,

The Asp.Net core document doesn't have much description about the using the bootstrap style. We can know that the default template will using Bootstraps in the Layout page. You could submit a feedback by clicking the button in the official document:

And if you want to add custom global CSS style, you can add them in the wwwroot\css\site.css file.

Best regards,
Dillion
Sam of Simple Samples 5,466 Reputation points

2022-01-21T09:11:35.813+00:00

Thank you. I did consider submitting feedback and it helps to get verification that that would be appropriate.

I did just now discover that if I add font-size: 14px; to the html style in the wwwroot\css\site.css file then that does reduce the font size. The article that helped me is What Are the Bootstrap 4 Text Font Sizes and How Do You Change Them? 2022 - Bootstrap Creative. Probably people experienced with Bootstrap and ASP.Net Core would say it is obvious that that should work but it was not obvious to me. When I searched for answers I just got very confused; I found stuff implying I had to re-compile stuff just to change the style. Microsoft tends to document stuff using tutorials and this is the type of thing that should be in a tutorial of ASP.Net Core Web Apps generated by VS (and/or the dotnet command).
Sam of Simple Samples 5,466 Reputation points

2022-01-22T23:21:44.283+00:00

I posted feedback for Introduction to Razor Pages in ASP.NET Core and it was immediately closed; see Styling · Issue #24708 · dotnet/AspNetCore.Docs.

And changing the font-size in the site.css file is not enough; I need to change (reset) the font (font family) and that is not easy to determine how. I sure do not see how to do that in the site.css file.
Zhi Lv - MSFT 21,706 Reputation points Microsoft Vendor

2022-01-25T06:02:55.057+00:00

Hi @Sam of Simple Samples

And changing the font-size in the site.css file is not enough; I need to change (reset) the font (font family) and that is not easy to determine how. I sure do not see how to do that in the site.css file.

From your description, it seems that you have found the right direction to solve the problem, whether the problem have been solved? If not, you can refer this sample to set the font-family in the site.css file:

Best regards,
Dillion
Sam of Simple Samples 5,466 Reputation points

2022-01-25T06:58:48.457+00:00

No, nothing yet has accomplished what I wanted. I should have clarified my question so that it asks about the application that VS generates. I find no relevant documentation of that. I thought that changing the font size would be enough but it is not. I eventually decided to just remove Bootstrap from the application; that was easier to do than expected. The relevant Microsoft personnel think they do not need to provide any assistance and I disagree so that makes it difficult to decide what the answer is.

Answer 1

Michael Taylor 41,191

Razor has nothing to do with app styling and therefore there is no documentation. ASP.NET templates use Bootstrap so if you are using the default template then overloading a Bootstrap style would be covered by the Bootstrap documentation as it isn't related to ASP.NET/Razor. The only "customization" that ASP.NET does is define a side-wide style CSS file where you can then add your custom styling that would be applied in addition to the Bootstrap styling.

I'm not 100% sure but in CSS, to reset a rule to the default value then use the revert value. But note that revert simply undoes any styling changes to the current element. It might still inherit values from the parent. The initial resets a rule to the default value but I believe then ignores custom user styling as well which is not desirable. It also doesn't work for all properties. Finally you have the unset value which basically acts like revert or initial depending upon the type of property.

Sam of Simple Samples 5,466 Reputation points

2022-01-20T23:02:41.503+00:00

Thank you. I think it would be relevant for the description of the ASP.Net Core Web App to say something about the use of Bootstrap.

Perhaps it is as simple as using revert but I am not sure where Bootstrap intends us to put that. Unless someone says otherwise I will use the relevant Bootstrap documentation.
Michael Taylor 41,191 Reputation points

2022-01-21T14:33:54.05+00:00

Your app has a .css file in it (site.css I think). You put your custom styles in there. That file is included as part of your app's content. In most cases CSS simply merges all the rules together so it is additive. You can run into issues if multile CSS files define the same properties with different values as the last one wins and the browser determines that. Therefore you sometimes also have to include the !important value to force it to take precedence.

But going back to your original question, you aren't changing a CSS property but rather a Bootstrap-specific custom property for which the browser would know nothing about. In this case Bootstrap is just saying that the default font size it'll use is the same default font size as the site. It is basically an alias such that Bootstrap can then reference this value instead of the default font size. So, by default, it effectively does nothing. To change the default font size you just set the font-size property of html. As an example, if the site.css file says that the default font size is 12px then Bootstrap uses that default. If it says the default font size is 14px then it'll use that instead. 1 rem means 1x the root element. I don't really know why Bootstrap did that but in theory you could change their custom property to something like 1.5 rem and suddenly all the Bootstrap-configured fonts would be 1.5 times larger than the default font size for the page.

So, in summary, Bootstrap is already using the default font size so no changes should be necessary.

ASP.Net Core Razor global styles documentation

1 answer

Activity