In HTML, we use the <b> and <strong> 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. |
<number> | 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.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h2 {
font-weight: 700;
color: green;
}
.text {
font-weight: bold;
}
</style>
</head>
<body>
<h2>
Welcome To Geeks for Geeks
</h2>
<p class="text">
A Computer Science portal for geeks
</p>
</body>
</html>
Output:
Example 2: Using Various Font-Weight Values
The following example demonstrates different font-weight properties applied to simple texts.
<!DOCTYPE html>
<html>
<body>
<h2 style="font-weight: bold;
text-decoration: underline;">
Thought of the day
</h2>
<p style="font-weight: lighter;">
A good programmer is someone who
always look both ways
<span style="font-weight: 900;">
before crossing the one way road.
</span>
</p>
</body>
</html>
Output:
