The CSS font-size property is used to set the size of font. We can specify the value in percentages, units like pixels, cm, points, em, etc. and absolute keyword. Relative values maximize accessibility. The default font-size is 16px or 12pt.
Syntax
The syntax of CSS font-size property is as follows −
Selector {
font-size: /*value*/
}The following examples illustrate CSS font-size property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 10px;
text-align: center;
width: 50%;
border: 2px solid;
border-radius: 15%;
font-size: 1.4em;
}
</style>
</head>
<body>
<div>
one
<div>two
<div>three</div>
</div>
</div>
</body>
</html>Output
This gives the following output −
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: smaller;
}
#demo {
font-size: initial;
}
p:last-of-type {
font-size: 200%;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text 1.</p>
<p id="demo">This is demo text 2. </p>
<p>This is demo text 3.</p>
</body>
</html>Output
This gives the following output −
