Setting Font Size with Pixels using CSS

CSSWeb DevelopmentFront 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>

Output

This gives the following output −

raja
Published on 06-Jan-2020 15:17:30
Advertisements