How to bold the text using CSS ? (original) (raw)
Last Updated : 8 Oct, 2024
In HTML, we use the and tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something important.
Font-Weight Property Values
| Value | Description |
|---|---|
| normal | Normal font-weight, equivalent to 400 (default numeric value). |
| bold | Bold font-weight, equivalent to 700. |
| bolder | Sets the font-weight bolder than the parent element. |
| lighter | Sets the font-weight lighter than the parent element. |
| A numeric value between 1 and 1000, inclusive (increasing boldness). |
When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.
Font-Weight Inheritance Chart
| **Parent Value | **lighter | **bolder |
|---|---|---|
| 100 | 100 | 400 |
| 200 | 100 | 400 |
| 300 | 100 | 400 |
| 400 | 100 | 700 |
| 500 | 100 | 700 |
| 600 | 400 | 900 |
| 700 | 400 | 900 |
| 800 | 700 | 900 |
| 900 | 700 | 900 |
**Example 1: Using font-weight for Bold Text
The following example demonstrates how to use the font-weight property in CSS to represent simple text in bold.
HTML `