Font size decleration using html selector and h1 font size

Font size decleration using html selector and h1 font size

Hey guys!

Fairly new to web dev so sorry if this is a silly question!

I was browsing through the codepen for the tribute page project and I noticed a font size style was applied to to the entire document using the html selector, with the intention being to make working out rem values easier. I then noticed when adding content to a h1 element and a paragraph element that the font sizes were different. I know these elements have different default styles, but I assumed declaring the font size for the entire document would override this. Should the default font sizes be overrode(?) or am I missing something?


1 Like

I have written this small html example to test this. All elements are the same size, only last default p is not bold.

<!DOCTYPE html>
<html style="font-size: 100%;">
		<meta charset="utf8">
        	<title>Font Size REM</title>
                	.rem-applied {
				font-size: 2rem;	
        	<h1 class="rem-applied">I am 2rem big header</h1>
                <h2 class="rem-applied">I am 2rem big first subheader</h2>
		<p class="rem-applied" style="font-weight: bold;">I am 2rem big bold paragraph</p>
		<p class="rem-applied">I am 2rem big default paragraph</p>
1 Like

Thanks for the reply! From what I can see that would require the class to be applied to everything you want to style with that specific font size. From the example I seen on the tribute codepen, the following was applied in the CSS:

html {
  font-size: 67.5%;

body {
  font-size: 1.5rem;

Should this not apply the same font size to all text on the page weather it be a h1 or p? Or will the default h1 font size always be applied regardless?

It doesn’t change the default behavior just the default sizing used. Which is relative to the base font size (author set or default).

You can switch the html font size on and off to see the effects.

1 Like

I think it has just clicked for me. So basically what declaring the font size in html is doing is giving your rem inputs the sizes you want?