EN
CSS - change font size
0 points
In this article, we would like to show you how to change an element's font size using CSS.
Quick solution:
xxxxxxxxxx1
div {2
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|unset|initial|inherit;3
}
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.xx-small { font-size: xx-small; }7
.x-small { font-size: x-small; }8
.small { font-size: small; }9
.medium { font-size: medium; }10
.large { font-size: large; }11
.x-large { font-size: x-large; }12
.xx-large { font-size: xx-large; }13
14
</style>15
</head>16
<body>17
<div class="xx-small">xx-small</div>18
<div class="x-small">x-small</div>19
<div class="small">small</div>20
<div class="medium">medium</div>21
<div class="large">large</div>22
<div class="x-large">x-large</div>23
<div class="xx-large">xx-large</div>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.default1 { font-size: 1em; }7
.default2 { font-size: 16px; }8
9
</style>10
</head>11
<body>12
<div class="default1">1em</div>13
<div class="default2">16px</div>14
</body>15
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.default { font-size: 26px; }7
.smaller { font-size: smaller; }8
9
</style>10
</head>11
<body>12
<div class="default">13
26px14
<div class="smaller">15
1x smaller16
<div class="smaller">17
2x smaller18
<div class="smaller">19
3x smaller20
</div>21
</div>22
</div>23
</div>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.default { font-size: 15px; }7
.larger { font-size: larger; }8
9
</style>10
</head>11
<body>12
<div class="default">13
15px14
<div class="larger">15
1x larger16
<div class="larger">17
2x larger18
<div class="larger">19
3x larger20
</div>21
</div>22
</div>23
</div>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.default { font-size: 26px; }7
.smaller { font-size: 80%; }8
9
</style>10
</head>11
<body>12
<div class="default">13
26px14
<div class="smaller">15
1x 80%16
<div class="smaller">17
2x 80%18
<div class="smaller">19
3x 80%20
</div>21
</div>22
</div>23
</div>24
</body>25
</html>xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.inherit { font-size: inherit; }7
.initial { font-size: initial; }8
.unset{ font-size: unset; }9
10
</style>11
</head>12
<body>13
<div class="inherit">inherit</div>14
<div class="initial">initial</div>15
<div class="unset">unset</div>16
</body>17
</html>