CSS font-size property | Intro to HTML/CSS: Making webpages | Computer Programming | Khan Academy

– [Voiceover] We can also use CSS to change the size of our text. As you can see by looking
at the headings on this page compared to the paragraphs, the browser already
provides default styles with different sizes
for different elements. There’s a body font size and bigger sizes for each level of heading. Sometimes you want to
tweak those sizes though. And we can do that with
the CSS font size property. For example, what if we want
all of the text on our page to be just a little bit smaller. Well go to the style tag. And we’ll add a CSS rule for the body tag. And then inside that put
a font size property. Now what should the
value be for font size? How do we measure font size anyway? It’s actually a really good question because there are at
least ten different units that CSS supports for font size. Let’s start with a unit
that you’ve seen before. Pixels. We use pixels to decide
how big to make images. And we’ll keep using them a lot in CSS. Let’s try 11 pixels. Hah. Everything got smaller. Even the headings got smaller actually. Hmm. Why did the headings get smaller too? Shouldn’t they be whatever pixel size the browser set them to before? No. Because the default
browser style for headings isn’t specified as a pixel. It’s specified using a
different unit called M. And that unit is a relative unit that makes the heading font
size scale proportionally to the body font. Lemme show you what I mean. Let’s go to our H2 style rule. And add the font size property. This time instead of thinking in pixels, I’m going to think relatively. How much bigger,
relatively, do we want H2s compared to body text? Maybe two times bigger. For that we write 2M. What actually happened
now is that the browser has calculated a pixel size for the font. The browser knows that the
body font size is 11 pixels. And you told it that H2
should be two times bigger. So now all the H2s are 22 pixels high. If we change the body
font size to 12 pixels, then how big will the H2s be? That’s right, 24 pixels. What if we change the
H2 font size to 1.5M? Now the H2 will be 12 times 1.5. 18 pixels high. We can also specify a
pixel size for the H2 rule like we did for body. And it would work the same way. It depends on what you find easier. And, like I mentioned earlier, there are lots more units
that we could use besides pixels and M. These are just two of
the most popular units. But if you’re hungry for more, check out the documentation for font size. Or search the internet for more tutorials. It’s time to super size your font size.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *