CSS Tutorial for Beginners - 15 - More on Font sizes Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 15th video on beginning
CSS now we're going to keep using the
code that we use from the last video
let's open up our index.html document
and we're going to do a little bit of
house clean I want you to get rid of the
inline CSS that we did in the last video
and we'll be using that later videos but
we're not going to use it for the next
several so we'll get rid of that and
let's go ahead and save this and then
let's go ahead and open up our style
sheet and so let's talk about font sizes
now the first type is pixels and we've
been doing that right we specify the
pixel count right here in our paragraph
class and so we've been using those all
along now another way is to use
percentage and we'll get to that in a
minute another way is to use eeehm and
that involves scaling and we'll get to
that in a minute
and then yet a fourth way is to use
keywords and we'll talk about those in a
minute as well so first let's go ahead
and do a copy and paste here and we're
going to move the font size property
into the body rule set and let's go
ahead and delete that out of our
paragraph classes now and so what that
means is we're going to be using an
inheritance here so this font size will
be applied to all of the child elements
that are under the body parent element
so all of our h1 elements will get it
our paragraph elements will get it as
well everything basically in the web
page will have this applied to it now so
that's probably the best way to use
fonts is to use inheritance and let's
also split these two up here as well
because we're going to actually apply a
different font size to our h1 and h2
because they usually are different sizes
so let's go ahead and copy and paste
this as well and will keep the same text
decoration for underline we'll just make
this one h2 and we'll make this one h1
good so as I said we want our h1 to be
the largest font size and our h2 to be
the second largest font size and then
the paragraphs will be a little bit
smaller than those font sizes that's
pretty much the way it's done in all web
pages so let's go ahead and copy this
font size property again and we're going
to put it in our h1 selector first and
here is where we're going to use
percentage and we're going to make this
150 percent and then let's go ahead and
use the other example p.m. and I'll
explain these in a minute so we're going
to make this one point to be M now let
me explain how this works so the font
size for h1 will be increased 150
percent off of this 25 pixels because it
is inheriting the font size from the
body selector and then it will increase
it by 150% so this is a relative unit of
measure in other words it's relative to
this font size and so let's go ahead and
open up calculator and we'll actually
calculate what the exact pixel count
will be for our h1 header so if we pull
up calculator let's go ahead and do that
now
and we'll put in 25 well times it times
150 and we'll do the percentage and you
get a pixel count of 37 point 5 and so
let's go ahead and leave the calculator
up there now e/m does the same thing
that percentage does it's a relative
unit of measure so this will be 1 point
2 times 25 so that's pretty easy to
figure out so 25 times 1 point 2 gets us
30 so that will be the size of our h2
header it will be 30 pixels and so again
this is doing pretty much the same thing
that percentage is doing and you can use
either one or you can use both but this
is scaling it up 1.2 times now the key
point I want to make here and this is
very key to understanding webpage design
the nice thing about this is let's say
you come back at a later point and you
want to change the font size in your
website well think about this all you
have to do now is alter this value right
here you don't have to go in here now
and specify an exact pixel count it will
do it automatically for us it will scale
it and that's the nice thing about using
inheritance and using the font size
property inside the body rule set
because that way it will automatically
apply it for the rest of our entire
website we don't again
we don't have to go in here and change
this to an absolute pixel count and so
that's really the best way to adjust
your font sizes okay the final thing
we're going to talk about is keywords
now you can put in keywords and those
equate to a pixel count it's pretty much
the same thing as using pixel I like to
use actually the pixel count up here but
you could put in here medium or large if
that's easier for you to read
I actually they like to use the exact
pixel count but again you can use what
you want you could put these in here as
well these keywords okay so let's go
ahead and save everything let's close
out the calculator let's save our
stylesheet and now let's open up our web
page and there you can see we've got
everything applied to our web page now I
want to point out one thing else here um
let's close this out we didn't specify a
percentage here in our paragraph classes
so this will just inherit the font size
of 25 pixels because we didn't put
anything else in here so it'll just take
that font size okay that is going to do
it for this video I will see you guys in
the next video