CSS font-size Property

The CSS font-size property sets the size of the text. It can be defined using various units like pixels (px), em units (em), rem units (rem), percentages (%), or keywords like small, large, etc.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large
           |xx-large|smaller|larger|length|initial|inherit;

Default Value: medium

Property Values:

Property	Description
`absolute-size`	Sets the font size absolutely. Default is medium. Possible values: xx-small to xx-large.
`relative-size`	Adjusts font size relative to parent element. Values: smaller (decreases), larger (increases).
`length`	Sets font size using specific lengths like px, cm, etc.
`global`	Offers universal settings: `initial` (default value), `inherit` (inherits from parent), `unset`.

Syntax:

font-size: medium|xx-small|x-small|small|large|x-large|xx-large;

Example: In this example, we are using abe explained property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS font-size property
    </title>

    <!-- CSS style to set font-size property -->
    <style>
        .xxsmall {
            color: green;
            font-size: xx-small;
        }

        .xsmall {
            color: green;
            font-size: x-small;
        }

        .small {
            color: green;
            font-size: small;
        }

        .medium {
            color: green;
            font-size: medium;
        }

        .large {
            color: green;
            font-size: large;
        }

        .xlarge {
            color: green;
            font-size: x-large;
        }

        .xxlarge {
            color: green;
            font-size: xx-large;
        }
    </style>
</head>

<body>
    <h1>font-size property</h1>

    <div class="xxsmall">font-size: xx-small;</div>
    <div class="xsmall">font-size: x-small;</div>
    <div class="small">font-size: small;</div>
    <div class="medium">font-size: medium;</div>
    <div class="large">font-size: large;</div>
    <div class="xlarge">font-size: x-large;</div>
    <div class="xxlarge">font-size: xx-large;</div>
</body>

</html>

Output:

Example: In this example, we are using font-size: smaller|larger; property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS font-size Property
    </title>

    <!-- CSS property to set font-size -->
    <style>
        .smaller {
            color: green;
            font-size: smaller;
        }

        .larger {
            color: green;
            font-size: larger;
        }
    </style>
</head>

<body>
    <h1>font-size property</h1>

    <div class="smaller">
        font-size: smaller;
    </div>
    <div class="larger">
        font-size: larger;
    </div>
</body>

</html>

Output:

Example: In this example, we are using font-size: length; property.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS font-size Property
    </title>

    <!-- CSS property to set font-size -->
    <style>
        .length {
            color: green;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <h1>font-size property</h1>

    <div class="length">
        font-size: length;
    </div>
</body>

</html>

Output:

Example: In this example, we are using font-size: initial property.

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS font-size Property
    </title>

    <!-- CSS property to set font-size -->
    <style>
        .length {
            color: green;
            font-size: initial;
        }
    </style>
</head>

<body>
    <h1>font-size property</h1>

    <div class="length">
        font-size: initial;
    </div>
</body>
</html>

Output:

Supported Browsers: The browser supported by font-size properties are listed below:

Contact Us