Font Size in CSS

CSS Web Development Front End Technology

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

Live Demo

<!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

Live Demo

<!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>