CSS Tutorial for Beginners - 09 - The Font Weight Property Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the ninth video on beginning
CSS today we're going to look at the
font weight property in CSS and that
allows you to control the thickness of
your fonts so if you want lighter fonts
you can use the lighter parameter or if
you want bolder font so you can use the
bold parameter and the property can make
your fonts look more dynamic now I'm
using the code that we used from the
last video in the eighth video and I
made four different copies of it so
we'll make all the fonts on this HTML
page lighter this one will be normal
this one will be bold and this one will
be bolder and those are the four
parameters lighter normal bold and
bolder so let's start out with lighter
and what I did was I added the parameter
right here so it's font - weight and
then you just put in lighter now if we
wanted it to be normal we would put
normal here bold and the final one which
is bolder now I've added normal
obviously to this one bold to this one
and bolder to this one so we don't need
to look at those but what I wanted to be
able to do is open each one of these
HTML pages at the same time so you could
see the difference in weight now we're
going to add this to the body selector
and that rule apply to our entire HTML
body element so all the fonts in here
will be affected and again that's
through inherited something we've been
talking about throughout the series so
let's go ahead and close that and then
I'll just show you this really quickly
you can see here we've got the normal
parameter and in this one we've got bold
and in this one we've got bolder there
we go so let's go ahead and open up
lighter and now I'm going to minimize
this because I actually want to flip
through these and show you the
difference and then we'll open up normal
and I'm going to go ahead and minimize
that and we'll open up bold and I'm
going to go ahead and minimize that and
then bolder and now I'm going to flip
through these because it's easier to see
the difference so if we open up light
and so that's the lightest font weight
and then now take a look at the
difference here you can see how I got a
little bit more bolder with the normal
weight and if we go to the bold font
weight the contrast gets even greater
and then this is bolder okay so that's
how that works with the font weight
property