Css Inheritance Question
Hi everyone! Asking this as a refresher for myself. I'm trying to set a font-size: 13px; on my h5's. But the user agent styles are applying instead.
I set the font-size: 13px; on the <div class="footer-col"> thinking the styles would inherit but the user agent styles are applied instead. Is this because my <div class="footer-col__1"> is acting as the actual parent and not my <div class="footer-col">?
https://codepen.io/ezekielswanson/pen/KKxqWEp
4 Replies
nope, inheritance is only for values not explicitly set somewhere else, and that includes the user agent stylesheet
also, you shouldn't be using px to set your font size, use rem instead
Thank you for reminding about switching to rem. But I'm confused b/c I set the font-size here
.footer-col {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 30px;
font-family: var(--body-font);
font-size: 13px;
line-height: 15.2px;
letter-spacing: 1.5px;
padding-top: 85px;
}
Shouldn't my h5 in inherit that?
for the properties that inherit and aren't set for the h5, it would yes. But the user style sheet has an explicit value for font-size, so that's applied instead
you can set
font-size: inherit; on the h5 if you wantAh, I see now! This was a great learning moment. Thank you so much for your help!