Percentage font sizes apply a font size relative to the parent element's font size. : font size « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. font size

Percentage font sizes apply a font size relative to the parent element's font size.

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>font-size</title>
        <style rel='stylesheet' type='text/css'>
span {
    background: mistyrose;
    font-size: 150%;
}
span span {
    background: pink;
    font-size: 125%;
}        
        </style>
    </head>
    <body>
        <p>
             
            <span>
                This font size is 50% bigger than that of the
                &lt;p&gt; element.<br />
                <span>
                    This font is 25% bigger than the font used
                    for the parent &lt;span&gt; element.
                </span>
            </span>
        </p>
    </body>
</html>








Related examples in the same category

1.'font-size' Example
2.font-size: 18px
3.font size: small
4.Set font size to 6em
5.Percentange larger
6.Percentange smaller
7.Font size relative selector
8.font-size larger is incremental
9.font-size smaller is incremental
10.font-size: from 24pt to 7pt
11.font-size percent
12.font-size: smaller
13.font-size: larger
14.The larger and smaller keywords of the font-size property function using the scaling factor of 1.2.
15.This font is 1.2 times the default font, or 20 pixels
16.Make font sizes smaller by percentage.
17.font-size: xx-small;
18.font-size: x-small;
19.font-size: small;
20.font-size: medium;
21.font-size: large;
22.font-size: x-large;
23.font-size: xx-large;
24.font-size: larger;
25.font-size: smaller;
26.font-size: 150%; (50% larger)
27.font-size: 75%; (25% smaller)
28.font-size: 1.5em; (50% larger)
29.font-size: 0.75em; (25% smaller)
30.font-size: 100px;
31.font-size: 20px;
32.font size relative length unit
33.font size relative larger
34.font size relative smaller
35.font size absolute keywords
36.font is 150% of the size of the user's font size preferences.
37.Font minimal value
38.This font is 90% of the 18 pixel size specified
39.font relative size
40.Font absolute measurements
41.Font relative sizes
42.font size: pixel, point, inch, mm and em, ex
43.Font percentages
44.font-stretch values
45.font size settings
46.font size with minimal values
47.Set font size to 90% for paragraph
48.Set font size to 120% for H1
49.font size percentage smaller
50.font size percentage larger
51.font size with relative keyword
52.font size and relative keyword: larger and large
53.font-size:20px; assigns a length of 20 pixels to font-size.
54.Set font size to small
55.Set font size to 1.2em
56.Font size with calculation
57.font-size: xx-small
58.Two typefaces with different x-heights shown at the same font-size
59.Set body font size
60.Nested font size
61.Paragraph text is black and in 12pt font
62.Font size by Absolute Sizes
63.Font size by Pixels
64.Font size by Points
65.Relative Font Sizes
66.Font size by Ems
67.Font size by Ex
68.Font size by percentage
69.Relative font size
70.This font is 24 pixels tall and this div is 3 ems tall