HTML and CSS Reference
In-Depth Information
Changing a font's weight
S
tarbuzz C
offee
Bever
ages
The
font-weight
property allows you to control how
bold the text looks. As you know, bold text looks darker
than normal text and tends to be a bit fatter too. You
can make any element use bold text by setting the
font-weight
property to
bold
, like this:
fo
nt-
weigh
t: n
orma
l;
font-weight: bold;
You can also go the other way. If you have an element
that is set to bold by default, or is inheriting bold from a
parent, then you can remove the bold style like this:
S
tarbuzz
Coffee
Beve
rages
font-weight: normal;
font-weight: bold
;
There are also two relative
font-weight
properties:
bolder
and
lighter
. These will make your text
style a little bolder or a little lighter relative to its
inherited value. These values are seldom used and
because not many fonts allow for slight differences in
the amount of boldness, in practice these two values
often have no effect.
You can also set your
font-weight
property to a
number between 100 and 900 (in multiples of 100),
but again, this is not well supported across fonts and
browsers and so is not often used.
Write the CSS to change the second-level headings in Tony's page from their default
bold value to normal weight. Then, add the rule to your CSS and give it a test drive.
You'll find the answer to this one on the next page.
