The font-size property is used to set the font size :
div{
font-size: 18px;
}
In this case, the font height will be 18 pixels. Pixels represent the most commonly used units of measure. To specify a value in pixels, the value itself is followed by the abbreviation “px”.
If no font-height is explicitly applied to the text, the browser’s default values are used. For example, for plain text in paragraphs, this is 16 pixels. This is the base text style.
The basic style for different text elements is different: if for paragraphs it is 16 pixels, then for h1 headings it is 32 pixels, for h2 headings it is 24 pixels, and so on.
You can also use a variety of units to measure font.
Keywords
There are seven keywords in CSS that allow you to set a font size relative to the base:
- medium : browser’s base font size (16px)
- small : 13 pixels
- x-small : 10px
- xx-small : 9 pixels
- large : 18 pixels
- x-large : 24 pixels
- xx-large : 32 pixels
- For example:
- font-size: x-large;
Interest
Percentages allow you to set the value relative to the base or legacy font. For example:
font-size: 150%;
In this case, the font height will be 150% of the base, i.e. 16px * 1.5 = 24px
Font inheritance can change the final value. For example, the following situation:
<!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>Font Height in CSS3</title>
</head>
<body>
<div>
<p>Once upon a time in the cold winter time</p>
</div>
</body>
</html>
Here, the p element inherits a 10px height font from its container div. That is, 10 pixels will now be the base for the paragraph.
Next, the p element is given a new font height of 150%. This means that the final height will be 10px * 1.5 = 15px.
Unit em
The em unit is in many ways equivalent to percentages. So, 1em equals 100%, .5emequals 50%, etc.