All language subtitles for 053 CSS Sizing.en_US

All right.

So now that we've got all of our content together, we can go ahead and style all of the text that

we've got on our web site.

So in this lesson I'm going to cover a number of font properties so that we can further style and make

our web site look the way that we want it to.

So the first thing I'm going to talk about is the font size, and to begin with I want my h1 to be a

lot bigger than my h2s

and my h3s, so that it really stands out as the title of this front page.

So let's head over to Atom and implement that change.

So, inside my h1 I'm going to tap into the font size property, and I'm going to set the font size to

90 pixels.

So this is the equivalent of selecting 90 in the dropdown menu when you're selecting a font size.

And now if I hit refresh then my title is going to get a lot bigger and it's going to fill most of that

top page.

Now at this point make sure that you're not zoomed in or zoomed out and that your browser is at 100

percent zoom, and you can check this by just going to Zoom In or Zoom Out, and you can see whether

you're on 100 percent or 110 percent.

So we want it to be 100 percent so we can see what everybody else should see by default.

Now currently our font size is set to be 90 pixels.

So on certain browsers, if the user goes into Preferences and they change their default font size for

their web page, for example if they need super large text in order to see, then you'll notice that font

size does not change even though the rest of the text does.

And this is because this is not a dynamic size.

So in order to make it dynamic there's two options.

So let's head back over here and just go back to the medium size and if we go into Atom, then instead

of using pixels, instead we can use something like a percentage.

So 100 percent in terms of font size is actually a 16 pixel size.

And so that means if we want 90 pixels,

so that means 90 divided by 16, and that would be equal to 562.5,

then we would need 562.5 percent in order to get the equivalent of 90

pixels.

So if we hit save and we go back to our web site and I hit refresh, you'll notice that absolutely nothing

happens, because we're specifying exactly the same font size,

but instead we're using a percentage this time.

So that means that if we go into, say, Preferences, and we change our font size to very small, very large,

than that font size will scale with it.

Now the other way of specifying a dynamic font size is by using a unit called the em.

For example if we head back onto our favorite web site, techcrunch.com, and we highlight this title

here and we inspect it.

Then if you select this h2 here, you'll see that it's got the class called live-title, and its font size

is specified as 2em, rather than however many pixels they want it to be.

Now we've seen em before inside our HTML, and we used it as a tag in order to emphasize a particular

section of text, and that stylistically means that it'll make something italicised.

Now in this case this is actually a completely different em, and the em in this case is actually the

phonetic pronunciation of the letter M, and the reason is because in typesetting in the olden days that

em, or the M, rather, M is the width of the capital letter M, and so that means that when you say 1em,

then you want the font size to be 1 times the width of the capital letter M.

And if you want two then that's double the size of the M,

etc., etc..

Now in modern days this is no longer true, but what is true is that one em or one M is 16 pixels, as we've

seen with our percentages.

So 16 pixels is equal to 100 percent

when you're talking about fonts, and it's equal to 1 M or 1em, and that means that you can achieve whatever

size you want dynamically using either of these methods.

So for example as we calculated before ninety pixels is equal to 5.625em. And so it means that

if we replace our font size with that number and we hit save and we go back to our site and we hit refresh

then you'll see again the font size does not change because they are all the same.

It's just using different ways of specifying the same size.

So then the question you might have is why would you use one over the other.

What does it matter?

And if you look on different web sites, for example take uber.com, and, you know, if we inspect on their

title here, then you'll notice that their font size is specified in pixels, whereas on Tech Crunch it’s

specified in ems, and on other sites you might get percentages.

Now as we mentioned before if we change the font size, for example, say, somebody with accessibility issues,

to very large, then these static sized fonts do not change,

it stays exactly the same size, whereas the things that are dynamically sized,

for example things using em or percentages, they do scale up so that users who have maybe visual impairments

etc., who might want to have a higher font setting, will be able to view the web site more comfortably.

And that's quite important in terms of making your web site accessible to everybody.

Now the argument against that is some web designers say that people with visual impairment these days

are more likely to zoom in rather than changing their default font size and they're more likely to have

a higher zoom in order to read all the text on page, and with zoom

it doesn't actually matter whether your text is statically or dynamically sized, because it will just

scale up the web site depending on what you’re asking it to do.

So maybe that's not such an important distinction between statically and dynamically sized fonts anymore,

but there is one thing that is really important and that's the fact that when you are using em or when

you're using percentages, that value is inherited.

So if I go into the body here and I specify a font size for everything inside the body, so that's everything

on my web site, to be, say, 2em,

and then in my h1 I leave my font size as the previous dynamic size, I hit save,

and let's head back to our web site and we refresh,

then you'll notice that our h1 has now become absolutely gigantic.

And that's because the font size gets inherited and added on top of whatever it got from its parent.

So the parent of the h1 is the body here, because it's contained inside the body, and in the body we

said that font size should be 2em across the entire body of the website.

Now when it gets to the h1, it's already got that 2em applied, and then it adds that 5.625

on top of the 2em, which is why we end up with something so gigantic.

And this is exactly the same with percentages.

So if I said say 200 percent in our font size and I changed this to 562.5 percent,

then again we still get this gigantic font size. But say if I said, you know, the font size should be 20

pixels.

And over here it should 90 pixels and we go over here,

We head back and we refresh,

then you see that the font size is staying as 90 pixels.

It does not matter what its parent’s font size was, because these are static sizes.

So that means it can get a little bit dangerous.

For example if you wanted all the text inside your body to be 200 percent, which remember is two times

16 pixels which is 32 pixels,

now that works fine until you get to a point and you forgot that you did that.

And over here you ended up setting your 5.625em, or your percent, and then all of sudden,

‘Oh, what's going on? Why does it look like this?’.

And you have to go and debug and try and figure out where did it get this font size from.

So for example we can inspect in our Chrome Developer Tools and you see,

‘OK, so it's got font size 5.625,

that’s what I want, but do I have any font sizes anywhere else?’.

And here in the body, even though it's crossed out, that 200 percent is still being applied.

So in order to avoid this, one of the things that we’ve got in the latest version of CSS, which is the version

that we are using currently, or the version that I'm teaching you about, is CSS3, and inside CSS3

there is something called the rem,

and that refers to the root em, so that means, ignore all of the parent’s settings for the font size

and just set it to this relative to the root. So that means that it doesn't matter what we've done

here or in its enclosing containers or parents. It will be 5.625, times 16 pixels, as long as we add

the r in front of the em.

So if we hit save and we head back over to our web site, hit refresh, then you can see that we still get

that size that we wanted which is the

5.625rem.

So, the beauty of the root em is that it does not get affected by upstream size changes and it means

that it's easier to debug and it's less likely that something will go wrong.

So when sizing text my personal recommendation to you is to use rem instead of em or percentages or

pixels, because that is the most adaptable and also the most reliable and least error prone.

So now if we head back over to our site and refresh and also change our font size in our Preferences

back to the Medium that's recommended, then you can see that we've got the exact size that we were looking

for, which is the same as the 90 pixels that we specified,

but this is done using rem rather than em or percentages.

Now here's a challenge for you.

Now at the moment our h2,

so, for example, this part where it says ‘a programmer’,

it looks a little bit too small, and I want you, as a challenge, to set the font size of the h2 to

be equivalent to 40 pixels, but I want you to do that using rem. So pause the video.

Go ahead and see if you can figure it out.

So that's pretty easy to calculate.

So our target is 40 pixels for the font size,

and we know that one em is 16 pixels.

So we can simply divide 40 by 16 and we end up with 2.5.

So it'll be 2.5 rem in order to achieve the equivalent of 40 pixels for the font size of our h2.

So let's go over to Atom and implement that.

So inside our h2,

let’s go ahead and set the font size to 2.5rem, hit save and refresh, and voila we've now got

a much larger subtitle and heading by changing the font size.

So if that was confusing at all make sure that you rewind and re-watch some of the parts we spoke about

dynamic font sizing and how it all worked.

But now there's just one thing that I want to change about the layout of this web site.

I would love for this h1 to have a little bit more padding from the top so that it gets pushed down

more towards the center of the page. So, we can do that by simply adding a 50 pixel margin to the top

of our h1 rather than having it as zero pixels.

So let's go into Atom and change the margin-top to 50 pixels.

This is what we end up with. Now with margin-top and padding

and all of those other things where we specify a size,

you can also use the em, the rem, or the percentage values, but in this case I actually prefer to stick

to using pixels because it's more precise and it's much easier to see what's going on when you inspect

it in using the box model.

So that's just a personal preference and it's stylistic choice of your own.

So if you want to use rem or em or percentages, that's absolutely fine as well, and it works exactly

the same way

as we mentioned with the font sizing.

So basically as long as you insert a 50 pixel equivalent margin then we should end up with something

that looks a little bit like this.

Now there's one more thing that I would like to change here after we've specified our font sizes and

that's to have a little bit less space between the h1 and the h2 here, because at the moment, if I hit

Inspect, you can see that the h1 has a significant amount of margin before and after.

And I would just like to get rid of that bottom margin.

So instead of specifying the margin-top we can just specify a margin using the circle shorthand.

So we start off with the top which is going to have 50 pixel margin.

Then we go to the right which I'm going to keep as auto to keep it centered.

Then we get to the bottom which I want to be zero.

And finally we have the left which I'm going to leave as auto as well.

Now if we hit save and we head back and close down our Chrome Developer Tools, now we hit refresh, you'll

see that we've got a little bit less space between the h1 and the h2, and it just looks a little bit more

put together.

Now these are minor tweaks and it's totally up to you if you want to implement them or not.

I'm just adjusting it to my eye.

Now in the next lesson I've got a number of challenges for you and I want you to use the developer docs

on MDN or on W3 Schools in order to figure out what these properties are and how you should set

them.

But you should be fully equipped in order to discover some of these other font related properties that

I want to talk about.

So head over to the next lesson and complete the challenge.