In this example, the font size of all <p> (paragraph) elements is set to 16px, all <h1> headings are set to 2.5em (which will be relative to the font size of their parent element), the base font size of the document is set to 1.4rem, and all elements with the class small-text have a font size of 80% (which will be relative to the font size of their parent element).

Challenge

Easy

You are given an HTML document with a heading (<h1>), a paragraph (<p>), and a division (<div>). Your task is to use the font-size property to style these elements. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the font-size to 32px.
Write a CSS rule that targets the <p> element. Set the font-size to 1.2em.
Write a CSS rule that targets the <div> element. Set the font-size to 120%.

Cheat sheet

The font-size property controls the size of text within an HTML element.

Common units for font sizes:

Pixels (px): Absolute unit specifying font size in pixels
Ems (em): Relative unit based on parent element's font size
Rems (rem): Relative unit based on root element's font size
Percentages (%): Relative unit based on parent element's font size

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

Try it yourself

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>