We know that in HTML, we have <b> and <strong> tags to make the content bold. When it comes to making a piece of text bold using CSS, then also we have an appropriate property to do the same.
We will use the font-weight property of CSS to make the content bold. We have a variety of options to set the thickness level of our text.
- normal : It is the normal font-weight. It is the same as 400, the default numeric-value for boldness.
- bold : It is the bold font-weight. It is the same as 700.
- bolder : It sets the font-weight bolder than the parent element.
- lighter : It sets the font-weight lighter than the parent element
- <number>: A <number> value between 1 and 1000, inclusive (in increasing order of boldness level).
When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.
| 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: The following example demonstrates a simple text which is represented in bold using CSS font-weight property.
HTML
<!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: The following example demonstrates few simple texts represented using other font-weight properties.
HTML
<!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:
font-weight property
Supported Browser:
- Google Chrome 2.0
- Internet Explorer 4.0
- Firefox 1.0
- Opera 3.5
- Safari 1.3