Font size which is related to mother div font-size

HTML & CSS
1

[code]


1-1 This is small.
1-2 This is normal.
1-3 This is a larger.

2-1 This is small. 2-2 This is normal. 2-3 This is a larger.
3-1 This is small. 3-2 This is normal. 3-3 This is a larger.
4-1 This is small. 4-2 This is normal. 4-3 This is a larger.
5-1 This is small. 5-2 This is normal. 5-3 This is a larger.
6-1 This is small. 6-2 This is normal. 6-3 This is a larger.
[/code]I have the code above at http://dot.kr/x-test/html/relativ-size.php.

I like to make like the following
in 1-1, the font-size of the div is 20px, so I like to make the size of the word “small” smaller than the font-size of mother div , i.e 19px, 18px, or 17px.
in 1-2, the font-size of the div is 20px, so I like to make the size of the word “normal” is same as the font-size of mother div, i.e . 20px.
in 1-3, the font-size of the div is 20px, so I like to make the size of the word “larget” larger than the font-size of mother div , i.e 21px, 22px, or 23px.

in 2-1, the font-size of the div is 30px, so I like to make the size of the word “small” smaller than the font-size of mother div , i.e 29px, 28px, or 27px.
in 2-2, the font-size of the div is 30px, so I like to make the size of the word “normal” is same as the font-size of mother div, i.e . 30px.
in 2-3, the font-size of the div is 30px, so I like to make the size of the word “larget” larger than the font-size of mother div , i.e 31px, 32px, or 33px.

in 3-1, the font-size of the div is 50px, so I like to make the size of the word “small” smaller than the font-size of mother div , i.e 49px, 48px, or 47px.
in 3-2, the font-size of the div is 50px, so I like to make the size of the word “normal” is same as the font-size of mother div, i.e . 50px.
in 3-3, the font-size of the div is 50px, so I like to make the size of the word “larget” larger than the font-size of mother div , i.e 51px, 52px, or 53px.

The following is my trials for it, but all are failed.
I tried to make it with % in 4-1, 4-2,4-3
I tried to make it with em in 5-1, 5-2,5-3
I tried to make it with rem in 6-1, 6-2,6-3

Can I make it with your help?

2

Which of your two different style value syntax work? i.e.
the
style="font-size:30px"
or
style="75%"

3

Copy this example to a file and open it in your browser.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/font-size-which-is-related-to-mother-div-font-size/208559
joon1
-->
    <style type="text/css">

.smaller {font-size:.5em;}
.normal {font-size:1em;}
.larger {font-size:1.5em;}

    </style>
</head>
<body>

<div style="font-size:20px">
  1-1 This is <span class="smaller">small</span>.
  1-2 This is <span class="normal">normal</span>.
  1-3 This is a <span class="larger">larger</span>.
</div>
<div style="font-size:30px">
  2-1 This is <span class="smaller">small</span>.
  2-2 This is <span class="normal">normal</span>.
  2-3 This is a <span class="larger">larger</span>.
</div>
<div style="font-size:50px">
  3-1 This is <span class="smaller">small</span>.
  3-2 This is <span class="normal">normal</span>.
  3-3 This is a <span class="larger">larger</span>.
</div>
<div style="font-size:20px">
  4-1 This is <span style="font-size:75%">small</span>.
  4-2 This is <span style="font-size:100%">normal</span>.
  4-3 This is a <span style="font-size:150%">larger</span>.
</div>
<div style="font-size:20px">
  5-1 This is <span style="font-size:0.5em">small</span>.
  5-2 This is <span style="font-size:1em">normal</span>.
  5-3 This is a <span style="font-size:1.5em">larger</span>.
</div>
<div style="font-size:20px">
  6-1 This is <span style="font-size:0.5rem">small</span>.
  6-2 This is <span style="font-size:1rem">normal</span>.
  6-3 This is a <span style="font-size:1.5rem">larger</span>.
</div>

</body>
</html>

Notes:
“spans” are properly closed.
“style” statements include “font-size:”
I changed “style” to “class” in the first three groups because it was easier. I used ems, you could also use percent or rems.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.