Font Weight

Part of the Styling with CSS section of Coddy's HTML journey — lesson 20 of 76.

In CSS, the font-weight property is used to control the boldness or thickness of text within an HTML element.

Common numeric values for font-weight include:

100: Thin
200: Extra Light
300: Light

400: Normal
500: Medium
600: Semi Bold

700: Bold
800: Extra Bold
900: Black

Common keyword values for font-weight include:

normal: Equivalent to 400
bold: Equivalent to 700

lighter: Specifies a lighter weight than the parent element
bolder: Specifies a bolder weight than the parent element

For example:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

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-weight property to style these elements. Follow the steps below:

Write a CSS rule that targets the <h1> element. Set the font-weight to 900.
Write a CSS rule that targets the <p> element. Set the font-weight to lighter.
Write a CSS rule that targets the <div> element. Set the font-weight to 600.

Cheat sheet

The font-weight property controls the boldness or thickness of text.

Numeric values:

100: Thin
200: Extra Light
300: Light
400: Normal
500: Medium
600: Semi Bold
700: Bold
800: Extra Bold
900: Black

Keyword values:

normal: Equivalent to 400
bold: Equivalent to 700
lighter: Lighter weight than parent element
bolder: Bolder weight than parent element

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Try it yourself

<html>
<head>
    <title>Font Weight</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>