I've a typical HTML structure as shown in the code below.
<div class="common-parent">
<div class="parent>
<div class="child">
<h2>Child 1</h2>
<span>Some text here...</span>
</div>
<div class="new-child">
<h2>New Child</h2>
<div>
<span>Some text here...</span>
</div>
</div>
</div>
</div>
Now, I need to change the font-size or the rem size of all the elements inside the div.parent including itself.
Since the default rem size is equal to 16px, I need to reduce it to 12px that is 75%. I can't change it on 'html' tag as it will affect all the other elements as well.
How do I change it only for 'div.parent' and all the elements inside that using SCSS or CSS?
The CSS length unit 'rem' means 'Root EM' and it always depends on the root element <HTML>
. So if you want a font size depending on a particular parent element's font-size settings, you may use other units like em or percentage.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With