Which CSS property controls the text size? (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 px, em, rem, and % (percentage). These are the most used units in CSS. It can also take absolute values.

Also Read – CSS before and after pseudo elements

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-small, x-small, small, medium, large, x-large, xx-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 */
}

Conclusion

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.