CSS | font-weight Property

Difficulty Level : Medium
Last Updated : 16 Oct, 2019

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 example, some font-family are available only in specific weights.

Syntax:

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

Keyword Values:

normal: This defines the normal font weight (default 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.

Relative Keyword Values:

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.

Numeric Values:

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, suitable weight is applied.

Global Values:

initial: This sets the font weight to 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 a inheritable property.

Example:

<!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>
    <!-- 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>                    