How to bold the text using CSS ?

Last Updated : 30 Jun, 2021

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>