Font-weight is a CSS property that is used to specify the weight or thickness of the characters in a font. It is used to make the text appear bold or light. The font-weight property is used in conjunction with the font-family property to specify the font to be used for the text.
The font-weight property can take a range of values from 100 to 900. The default value is 400, which is considered normal or regular weight. Values below 400 are considered light, while values above 400 are considered bold.
The font-weight property can be specified using either numeric values or keywords. The numeric values range from 100 to 900 in increments of 100. The keywords that can be used are normal, bold, bolder, and lighter.
To set the font-weight property using numeric values:
<p style="font-weight: 100;">This text is very light.</p>
<p style="font-weight: 400;">This text is normal.</p>
<p style="font-weight: 700;">This text is bold.</p>
<p style="font-weight: 900;">This text is very bold.</p>
To set the font-weight property using keywords:
<p style="font-weight: normal;">This text is normal.</p>
<p style="font-weight: bold;">This text is bold.</p>
<p style="font-weight: bolder;">This text is even bolder.</p>
<p style="font-weight: lighter;">This text is lighter.</p>
The font-weight property can also be used in combination with other CSS properties to create different effects. For example, it can be used with the text-decoration property to create an underline effect:
<p style="font-weight: bold; text-decoration: underline;">This text is bold and underlined.</p>
Overall, the font-weight property is a useful tool for controlling the weight or thickness of text in a web page. It can be used to create a variety of effects and is easy to use with both numeric values and keywords.