The font-weight
property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as 200
or 500
.
When using numeric weights, there are a number of default font weights that we can use:
400
is the defaultfont-weight
of most text.700
signifies a boldfont-weight
.300
signifies a lightfont-weight
.
Let’s take a look at an example of how numeric fonts are used.
header { font-weight: 800; } footer { font-weight: 200; }
Here, the header would appear as a deep bold, while the footer would appear rather light.
It’s important to note that not all fonts can be assigned a numeric font-weight
. You can look up the font you are using to see which font-weight
values are available.
Instructions
The header section of the webpage is where the navigation menu is. It lives at the very top of the page.
In style.css, in the header section, set the font weight of the element with class header
to 900. You’ll notice the list elements in the navigation thicken.