Little Web Hut

CSS 2.1 Reference: font-weight Property

CSS font-weight Property
Syntax
selector {font-weight: value;}
  • value is specified by using one of the following keywords: normal, bold, bolder, lighter, inherit or one of the following weight-numbers: 100, 200, 300, 400, 500, 600, 700, 800, or 900.
Usage

The font-weight property is used to specify the weight, or darkness, of a font.

This property is specified by using a keyword, or a weight-number, according to the syntax shown above. Weight-numbers are 100, 200, 300, 400, 500, 600, 700, 800, and 900. It should be noted that not all font families support 9 levels of font weights. Therefore, each successive weight-number produces a weight that is equal to, or greater than, the previous weight-number. The weight-numbers 400 and 700 are equivalent to the keywords normal and bold respectively.


CSS Example: The font-weight properties are set using both keywords and weight-numbers.
  #tst1 {font-weight: bolder;}
  #tst2 {font-weight: lighter;}
  #tst3 {font-weight: normal;}
  #tst4 {font-weight: 400;}
  #tst5 {font-weight: bold;}
  #tst6 {font-weight: 700;}
Test It HTML StyleTest It XHTML StyleTest It HTML5 Style

Keywords
  • normal - This font weight is equivalent to the weight-number 400.
  • bold - This font weight is equivalent to the weight-number 700
  • bolder - This font weight is equal to, or greater than, the font weight inherited from the parent element.
  • lighter - This font weight is equal to, or less than, the font weight inherited from the parent element.
  • inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.
Applies To All elements
Inherited Yes
Initial Value normal


font-weight Property Examples
Test It HTML StyleTest It HTML StyleTest It HTML5 StyleThe font-weight properties are set using both keywords and weight-numbers.