The font-size CSS property
The font-size CSS property

As a CSS beginner, you must wonder which CSS property controls the text size. I have been in this state and worry not because as you practice you will learn all the basic CSS properties.

It is the font-size CSS property that controls the text size. This property can take values in 4 types of units pxemrem, and % (percentage). These are the most used units in CSS. It can also take absolute values.

Also Read – CSS before and after pseudo elements

Table of Contents

The syntax of the CSS font-size property

The font-size property is a simple one to write. It only takes a value. Its syntax is as follows

selector {
  font-size: value;

As you can see we use the font-size keyword for the property followed by a colon (:). Then we need to write our value to it and it must end with a semicolon (;).

The values CSS font-size property can take

The font-size CSS property accepts values in 4 types of units.

  • px – px stands for pixel and it represents the number of pixels
  • em – em unit is relative to the parent font size
  • rem – rem unit is relative to the HTML element font size
  • % (percentage) – 100% is equal to the current font size Absolute values – xx-smallx-smallsmallmediumlargex-largexx-large, and xxx-large.

Here are some examples

h1 {
  font-size: 100px; /* value in pixel */

p {
  font-size: 1.2em; /* value in em */

strong {
  font-size: 2rem; /* value in rem */

b {
  font-size: 110%; /* value in % (percentage) */

div {
  font-size: small; /* absolute value */


As you have learned that we use the font-size CSS property to control the size of the font. While the font-size property syntax is it can use many types of units and is very useful in web development.

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply