CSS font-weight Property
CSS font-weight property sets the thickness of characters of the text present in HTML Element(s).
The syntax to specify a value for font-weight property is
font-weight: value;
The following table gives the possible values that could be given to font-weight property.
| value | Description | Examples |
|---|---|---|
| normal | No capitalization. | font-weight: normal; |
| bold | Converts the first character of each word to uppercase. | font-weight: bold; |
| bolder | Converts all character in text to uppercase. | font-weight: bolder; |
| lighter | Converts all character in text to lowercase. | font-weight: lighter; |
| 100 | Thinnest characters. | font-weight: 100; |
| 200 | font-weight: 200; | |
| 300 | font-weight: 300; | |
| 400 | Same as normal. | font-weight: 400; |
| 500 | font-weight: 500; | |
| 600 | font-weight: 600; | |
| 700 | Same as bold. | font-weight: 700; |
| 800 | font-weight: 800; | |
| 900 | Thickest Characters. | font-weight: 900; |
| initial | Sets text-transform to default value. | font-weight: initial; |
| inherit | Inherits text-transform value from its parent element. | font-weight: inherit; |
The numeric values take effect only if the font support those font weights.
Examples
In the following examples, we transform the text in HTML Element(s), in terms of case, using text-transform property.
Bold Text
In the following example, we set the text in paragraph element to bold, using font-weight property.
index.html
Different font-weight values
In the following example, we set each of the paragraph elements with each of the possible values for font-weight property.
index.html
font-weight for some other HTML Elements
In the following example, we set font-weight property for some other HTML Elements like h1, h2, and a.
index.html
Conclusion
In this CSS Tutorial, we learned about font-weight property, and how to use this property for HTML Elements, with examples.