HTML CSS examples for CSS Property:font-weight
The font-weight CSS property sets the weight or boldness of the font.
The following table summarizes the font-weight Property.
| Item | Value |
|---|---|
| Default value: | normal |
| Applies to: | All elements |
| Inherited: | Yes |
| Animatable: | Yes. |
The syntax of the property is as follows:
font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | initial | inherit
The following table describes the values of this property.
| Value | Description |
|---|---|
| normal | Set normal characters. |
| bold | Set thick characters. |
| bolder | Selects a font weight that's bolder than the weight inherited from the parent. |
| lighter | Selects a font weight that's lighter than the weight inherited from the parent. |
| 100 | The numeric values 100 to 900 form an ordered sequence, where each number indicates a weight that is equal to or darker than its predecessor. The keyword normal is same as 400, and bold is same as 700. |
| initial | Sets this property to its default value. |
| inherit | take the value of its parent element font-weight property. |
The example below shows the font-weight property.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of CSS font-weight property</title> <style type="text/css"> h1 {<!-- ww w. j a va2 s . c o m--> font-weight: normal; } p { font-weight: bold; } </style> </head> <body> <h1>This is heading</h1> <p>This is a paragraph.</p> </body> </html>