PUBLISHED ON: APRIL 14, 2021
CSS font-size property
The font-size property in CSS asserts the size of the font. Changing the font-size also updates the sizes of the font-size relative length units like em, ex, and so on. The font-size property is specified either as one of the absolute-size or relative-size keywords or as a length or a percentage or relative to the font size of the element. The font will be smaller or larger related to the font size of the parent element.
Syntax for font-size property:
Following is the syntax for the font-size property.
font-size:medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit;
Example: CSS font-size property
In this example, we are using the font-size property of the text to design our text or paragraph in some styles specified by us. In this case, we have given the font-size value for our text using all the values of this property- xx-small means the extra small size of the text, larger means the large font size of the text, and 24pt or 200 % specifies the value of the font size of the text.
<!DOCTYPE html>
<html>
<head>
<title>The font-size property in CSS</title>
<style type="text/css">
h1{
color: purple;
}
.small {
font-size: xx-small;
}
.larger {
font-size: larger;
}
.point {
font-size: 24pt;
}
.percent {
font-size: 200%;
}
</style>
</head>
<body>
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
</body>
</html>
Output:
Example 2: CSS font-size property
In this example, we are using the font-size property of the text to design our text using different font sizes for our text and in this case, we have given the font-size values as x-small means extra small size of the text, large means the large font size of the text and we have written two sentences for the two different values so that the property value gets easily visible.
<!DOCTYPE html>
<html>
<head>
<title>The font-size property in CSS</title>
<style type="text/css">
h1{
color: purple;
font-size: x-small;
}
h2{
color: red;
font-size: large;
}
</style>
</head>
<body>
<h1> Study Tonight </h1>
<h2> Study Tonight </h2>
</body>
</html>
Output:
Live Example
Here in this live example, you can test the code and execute the example using different values or even edit the code example.
Browser Compatibility
There are many browsers that do not support all the latest CSS properties. Hence, while developing any webpage, if you are using any CSS property you must check the browser compatibility for that CSS property and then use it. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
1 |
1 |
| Internet Explorer |
5.5 |
5.5 |
| Opera |
7 |
7 |
| Safari |
1 |
1 |
| Webview Android |
1 |
1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
4 |
4 |
| Opera Android |
10.1 |
10.1 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the font-size property in CSS is medium. This property is applicable to all elements and also tot he ::first-letter and ::first-line. It is an inherited property. The percentage refers to the font size of the parent element. The computed value for this property is the as specified one. The animation type for this property is length.
