I'm new to CSS and html.
I have tried to look up how to change font size i have found posts that says stuff like this:
body {
font-size: 10pt;
}
however, i do not know where or how to use that.
So i need like an explanation for a complete noob.
Every Blazor application has a CSS file generated automatically - usually in the wwwroot directory and is included in one of the following files:
Find the CSS file of your app and add CSS rules there.
and then what? If i want fontsize 11 on one thing and fontsize 13 on another thing, how does me knowing the location of the CSS file help?
Hi @morknox,
You asked where to put CSS and I answered. If you need additional help you can try providing more details. Check the forum FAQ for tips. Also do not post the same question in different threads.
with me saying "i do not know where or how to use that." it was meant to convey that i have no clue at all how to do anything.
The "how" was more important than the "where", because if i knew "how" i could probably figure out "where".
The additional help i need is how to get from "zero knowledge about CSS" to "knowing how to change font size on different elements".
I dont even know where to begin so i cant formulate a good question, thats why i was vague and why i said "explain to a complete noob".
Sorry if i sound salty or something, i just dont know how to more exactly convey my total lack of knowledge
Apperently all you needed to do was add this:
style: "font-size: 12pt"
to whatever element you wanted to change font size on. I was searching the internet like crazy but they all talked about CSS files this and that and other complicated things.
So if anyone else finds this thread after searching, this is all you need to know:
<RadzenText style="font-size: 12pt">Test</RadzenText>
Yes, you can use the style attribute to set the font size for some of the components such as RadzenText. The style attribute is also CSS but has higher precedence over rules defined in an external CSS file (such as the Radzen.Blazor theme e.g. material-base.css).
There are components that render multiple nested HTML elements (for example RadzenDataGrid). Then things become more complex and using just style="font-size: 12pt" won't suffice. Still you can set the font-size of everything. Read ahead.
The key is to find what CSS variable specified it for the desired element. The browser dev tools would show that. For example:
Here we see that the font-size of a grid cell is set as font-size: var(--rz-grid-cell-font-size). So to change the cell font size of RadzenDataGrid you need to do
<RadzenDataGrid style="--rz-grid-cell-font-size: 12px" ...>
