Skip to content
Related Articles

Related Articles

Improve Article

How to bold the text using CSS ?

  • Difficulty Level : Easy
  • 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 Valuelighterbolder
100100400
200100400
300100400
400100700
500100700
600400900
700400900
800700900
900700900
 

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :