Up next in 10
CSS Tutorial For Beginners 27 - Font Size
4K views
Feb 7, 2024
In this CSS tutorial tailored for beginners, viewers explore the topic of font size, an essential aspect of typography and web design. The video likely covers how to set font sizes for text elements using CSS, including various units of measurement such as pixels, ems, and percentages. Viewers can expect to learn how to choose appropriate font sizes for different types of content and how to use relative units to create more flexible and responsive designs. Practical examples and demonstrations may be included to illustrate the impact of font size on the visual appearance of text within web pages. This tutorial serves as a foundational resource for beginners seeking to improve their understanding of typography and CSS styling techniques.
View Video Transcript
0:00
Yo guys, what the hell is going on? This is CSS for Beginners Lesson 27, and in this video
0:12
we're going to talk all about font size. That's coming up. Okay, so so far in this course we've looked at mainly selectors, that is how to target
0:21
elements on a HTML document. And we've got our ID selectors, we've got our class selectors
0:25
we've got our element selectors, among other things like descendant and child selectors
0:29
pseudo classes, etc. But now we're going to shift that focus over to the declaration
0:35
So when I've been putting properties in the rules in the past, I've been saying to you
0:38
you know, take no notice of this, we're going to cover it later. That's what we're going to do now. And we're going to start with the font size property
0:47
So when we do font size, we can do it in two ways, we can give something an absolute font
0:52
size or we can give something a relative font size. And the difference I'm going to
0:57
explain as we go back into the code. But generally speaking, absolute measurements are in pixels
1:04
and relative measurements are in ems or percentages. So we're going to take a look at all three
1:08
of these now when we jump back into the code. Okay ninjas, here I am back in the code, we've got an article HTML page here, and a blank
1:18
CSS file here. So the article page is h1, a few h2s, and some p tags within the article
1:25
And we're going to target all of these different elements. So we'll do our selectors first
1:30
They are h1, h2, and p. So we're going to give these a font size property. And we'll
1:41
do the h1 first. Now the way we do the font size property is by simply writing font-size
1:46
Okay, that's the property name. This is where we control the font size of that element
1:51
And then we do our colon, and then we put in a value. Now we're going to start with
1:55
pixels, which is an absolute value. And when I say absolute, I mean we give it a definitive
2:00
value, a number that's intrinsic, okay, and it doesn't change. So we'll say 48 pixels
2:07
And that's quite a large font size. And by the way, this px here stands for pixels. That's
2:13
quite a large font size, because it is a h1 after all, so we'll make it quite large
2:17
make it stand out. And the h2 will give a font size of 32 pixels. And then the p will
2:24
give a font size of 16 pixels, which is kind of like standard font size for general paragraph
2:30
text on a web page. So we'll save that, and we'll see what it looks like now within a
2:35
browser. Okay, so there's our h1 at the top, h2 is here, and our paragraph tags. So just
2:45
to check that this has worked, what I'm going to do is right-click each element, and I'm going to go to inspect element, which is going to open up Google tools here. And you can
2:52
see my rule in syntax.css for the h1s here, font-size 48 pixels. And if I hover over the
2:59
h2, then you can see the rule font-size 32 pixels, which we did, and over the p's, font-size
3:04
16 pixels. Now then, I'm going to show you something pretty cool. If you look here on
3:10
the h1, you can see another rule underneath mine, and it's in grey, and it says here
3:15
user agent style sheet. Now that's the default style, the default browser style that's being
3:19
applied that we talked about in an earlier lesson. And we can see there that it was two
3:23
m's. It's crossed out because I've overridden it, but if I uncheck this, you can see now
3:27
it's two m's and it changed size up here. Now m's are a relative unit of measurement
3:32
and we're going to cover those now. So I'm going to jump back into the code just to show you what this means. I'm going to delete these here for now. And to demonstrate this, I'm
3:41
going to use inheritance. Now we covered inheritance in a previous lesson. If you've not watched
3:46
that video, I'm going to leave a link to that in the description below, so you can go check that out. But for the rest of us, I'm going to use inheritance to demonstrate why we'd
3:53
use m's and percentages. So we know that I can select the article tag by doing that
4:01
Just write a simple article selector that's going to grab the article tags. And then I'm going to give those a font size of 16 pixels. So then what I'm saying is everything within
4:11
the article, give a font size of 16 pixels, so the p's and the h2's. But what I'm going
4:17
to do is I'm going to override the h2. So we know that h2 here is inheriting this font
4:24
size of 16 pixels, but we can override it. It's already been overridden in the default
4:29
browser styles, but we're going to override it again ourselves. And we're going to say
4:32
font size is going to be 3 m's. Now this here, m's, that's a relative measurement. And what
4:42
we're saying with this is that we're saying take the base font size, which it's inheriting
4:46
which is 16 pixels, and then times that by 3. That's what m's do. Okay? So we're going
4:53
to get this 16 pixels and times it by 3, which is 48 pixels. Okay? So I'll tell you
5:00
what, we'll do it by 4 just to make it bigger. And that's going to make it 64 pixels, this
5:04
h2. Okay? So we'll save that, and we'll right click and show in Explorer, view it in Chrome
5:13
And now these here are 64 pixels. Okay? And that's because they are m's, 4 m's. They're
5:20
inheriting 16 pixels font size, and then we're timesing it by 4, because this is a
5:24
relative unit. And we're saying we want the h2 font size to be 4 times as large as the
5:31
inherited style. Makes sense here? The same is true for percentages. So we'll do the same
5:38
with the p tags, article p. And we're going to give these a percentage font size. And
5:45
we'll say, what should we say, 60%. No, 50%. That's nice and easy. So we're saying again
5:52
the p's are automatically inheriting this 16 pixel font size, because we've said everything
5:58
in the article gives 16 pixels. But then with that inherited style, we're overriding the
6:04
font size, and we're saying, okay, take 50% of that size that we've inherited and display
6:09
that to the user. So we're taking 16 pixels, times it by 50%, which is 8 pixels, and then
6:15
it should output as that in the browser, which is going to be pretty small, to be honest
6:20
Get your glasses on, everyone. Yep, I can't read a thing there, but take my word for it
6:27
It's about 8 pixels. Okay? So let's just try one more. We'll say 500%. So 500% is essentially
6:33
saying, take 16 pixels and times that by 5, isn't it? So that would be 50, 80 pixels
6:39
roughly that this is. We'll view it in the browser one last time. Yeah, freaking huge
6:49
text there. Okay, so that about covers it. We've got our pixels, which are absolute sizes
6:59
They don't change depending on what they inherit. You just give it a size, and that's that
7:03
And then we've got our relative measurements, which are Ms. And if it's 4M, you take the
7:09
inherited style or the base style and you times it by 4. If it's 4.5, you times it by
7:13
4.5, et cetera. And then you've got your percentages, which are similar to Ms, but this time they
7:19
work in a percentage format. So same again. We're saying times it by 500%, the inherited
7:24
style, and display that font size. Okay, so hopefully that clears up how we control the
7:30
font size in CSS. If you have any additional questions, feel free to throw a comment or
7:34
two down below, and I'll answer all of those as soon as possible. Otherwise, if you enjoy
7:38
these videos, please subscribe, like or share them, and I'll see you guys in the next one