Setting Font Size with Pixels using CSS

CSS Web Development Front End Technology

We can specify the font-size in pixels to make the text use only a specific number of pixels. The pixel size is based on the resolution of the screen and the algorithm used by the browser to calculate it.

Syntax

The syntax of CSS font-size property is as follows −

Selector {
   font-size: /*value*/
}

Example

The following examples illustrate how CSS font-size property is set in pixels −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: darkseagreen;
   padding: 20px;
   font-size: 15px;
}
span:nth-child(3) {
   font-size: 55px;
}
span:last-child {
   font-size: 25px;
}
</style>
</head>
<body>
<br/>
<span>one</span><span>two</span><span>three</span>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
div {
   width: 40%;
   border: 2px solid yellow;
   padding: 20px;
   font-size: 10px;
}
div:nth-child(3) {
   font-size: 20px;
}
div:last-child {
   font-size: 30px;
}
</style>
</head>
<body>
<br/>
<div>one</div>
<div>two</div>
<div>three</div>
</body>
</html>