CSS font-size Property

Description

The font-size property sets the font size of the text inside the element to which it is applied, and that of its descendants. You can size text using absolute measurements, or measurements relative to the affected element's parent or root elements. Sets the size of the font within an element.

Initial value: medium
Applies to: All elements
Inherited: Yes
Media: Visual
Computed value: Absolute length
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.fontSize

Syntax

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Values

<absolute-size>A set of keywords indicating predefined font sizes that scale according to font setting preferences or each browser's default values. From smallest to largest, possible values are xx-small, x-small, small, medium, large, x-large, and xx-large.
<relative-size>A set of keywords interpreted relative to the parent element's font-size - either smaller or larger.
<length>An absolute unit value: any of the standard css length units are allowed. Negative lengths are illegal.
<percentage>A percentage value specifies an absolute font size relative to the parent element's font-size.
inherit

Example

HTML

<p class="test">A paragraph with the font size as a percentage of the font size of the parent element (180%). </p> 

<p class="test2">A paragraph with a font size of 1.5em.</p> 

<p class="test3">A paragraph with a font size of 16px. </p>

CSS

.test {
   font-size: 180%; 
}
.test2 {
   font-size: 1.5em;
}
.test3 {
   font-size: 16px;
}

Result

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

5.5	12	1	1	7	1

Tablets / Mobile

1	18	4	10.1	1	1.0

Last updated by CSSPortal on: 1st November 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu