Font-Sizing with class applied to parent or child (CSS/HTML)

HTML-CSS
1

Hi all,

So, I feel like there’s something I’m still not grasping about how font-sizing works in relation to inheritance between elements.

I’m working on a page with an h1 element for a title contained inside a header element. Now, I’m creating a class called “titletext” to set the font family and font size. I’d initially applied this class to the parent header element but then tried applying it directly to the h1 element when I couldn’t get “font-weight” to work properly. But I noticed that setting font-size produced vastly different results when the class applied to either the header parent or the h1 child, even when I set the size in px.

Now, I thought that any classes established in the parent just automatically inherit to the child without the occurance of another precedence like inline CSS, so why is it that a font-size of 50px looks drastically different when the class is applied to the header parent versus the h1 child contained within? Isn’t the size of 50px dependent on the size of screen, not the size of the element itself?

2

Hi,

h1 - h6 are sized (and weighted) relative to the normal base size.

If you put a class controlling font-size on a parent element then you’ve established a base size and all the enclosed headings like h1 will be sized relative to the parent - larger and heavier than the base size established in the class. That maintains a visual hierarchy - more important stuff is bigger and heavier.

If you put the class on the actual h1 element then you bypass all that relative sizing and have simply declared a size for that particular element.

3

Aha! I see! That makes perfect sense! Thanks for breaking it down so succinctly!

4

This is a major reason why resets are useful:

It does mean all the text in the entire document starts out at the same size, and you need to specify the sizes you need, but :man_shrugging:

The specific bit from the reset that fixes the font size:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-size: 100%;
}

I honestly don’t think I’ve ever built a site without a reset because the sizing of the headers, although it’s something I’ve always known, I literally can’t remember ever having to deal with it.