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
, andxxx-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.
Remember sharing is caring. Share it as much as you can.