CSS font-weight Property

The font-weight property of the CSS is used to set the weight or thickness of the font being used with the HTML Text. The font-weight applied will depend on font-family used and the browser. For instance, some font-family is available only in specific weights.

Syntax:

font-weight: normal|bold|lighter|bolder|number|initial|inherit|unset;

Property Values:

normal: This is the default font-weight & defines the normal font-weight. It is equal to the number value 400.
bold: This defines the bold font-weight, it is equal to the number value 700.
lighter: This makes the font-weight one level lighter than the parent element, considering the available font weights of the font family.
bolder: This makes the font-weight one level heavier than the parent element, considering the available font weights of the font family.
number: This sets the font-weight according to the number specified. The number can range between 1 to 1000. If the exact weight is unavailable, a suitable weight is applied.

Global Values:

initial: This sets the font-weight to the initial(default) value.
inherit: This sets the font-weight equal to the value inherited from its parent element.
unset: This sets the font-weight equal to the value inherited from its parent element since font-weight is an inheritable property.

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: The following example demonstrates the use of CSS font-weight property in which the property has been set to different values.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> font-weight property </title>
    <!-- font-weight CSS property -->
    <style>
    body {
        font-weight: bold;
        font-family: sans-serif;
    }
      
    p.one {
        font-weight: bold;
    }
      
    p.two {
        font-weight: lighter;
    }
      
    p.three {
        font-weight: 1000;
    }
      
    p.four {
        font-weight: initial;
    }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>CSS font-weight Property</h3>
    
    <!-- font-weight: bold; length; property -->
    <p class="one"> 
       Prepare for the Recruitment drive of product based 
       companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. 
      The course focuses on various MCQ's & Coding 
      question likely to be asked in the interviews 
      & make your upcoming placement season efficient 
      and successful. 
    </p>
  
    
    <!-- font-weight: lighter; length; property -->
    <p class="two"> 
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. The course 
      focuses on various MCQ's & Coding question likely to
      be asked in the interviews & make your upcoming 
      placement season efficient and successful. 
    </p>
  
    
    <!-- font-weight: 1000; length; property -->
    <p class="three"> 
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with 
      a free online placement preparation course. The 
      course focuses on various MCQ's & Coding question 
      likely to be asked in the interviews & make your 
      upcoming placement season efficient and successful. 
    </p>
  
    
    <!-- font-weight: initial; length; property -->
    <p class="four"> 
      Prepare for the Recruitment drive of product based 
      companies like Microsoft, Amazon, Adobe etc with a 
      free online placement preparation course. The course 
      focuses on various MCQ's & Coding question likely to 
      be asked in the interviews & make your upcoming 
      placement season efficient and successful. 
    </p>
  
</body>
</html>