Summary of Font Styling in CSS

Now let's talk about fonts. And for that I'll add a new paragraph here, another paragraph. If you notice, I added another paragraph and it has the same style. So that's because I used the name of the element to target it. When you use the name of the element, all the elements in the document of the P will be targeted. Now in practice in the real world, this is really bad. Why? Because you're going to change every single element. Let's say there's new paragraph. I didn't want it to have the same style. So we're going to talk a little bit more about that later. For now let's just talk about fonts. Let's say I want to increase the size of this text. So usually the CSS properties always start with font-something. So in this case it's the size. So if I say font-size and we're going to use the unit pixels, PX. So if I say 24 PX, semicolon, click run, you can see now the text increases size. Okay, so you can right click that inspect. Again, DevTools. If you don't like that size, you can always go here. One way of doing it that I like to do is in real time I click the 24 PX. I use my keyboard down and up arrow to calibrate how big I want it. So I can go down or I can go up and I choose the value that's most suitable to me. Once I find out the value, okay, I go back to my code and I change it here. Make sure to always change the original because the DevTools is always temporary. Okay, let's say I like a little smaller, maybe 20, so I write it there. Let me click run again so it resets. Okay, now let's talk about font family. So font family is basically a way for you to change the font. You know when you wrote word document, you can have aerial times do Roman, all these different kinds of fonts. So if you want to change the font here, you can always type its name. For example, if I write aerial, it's going to change to aerial. I don't know if you noticed, but it did change the font. So usually when you have font family, I advise you to always put quotes here, double quotes, because some font names have multiple names and the space might throw off the CSS. So if you have like Times New Roman, which has a space between the words, make sure to put double quotes before the name and after. So it doesn't mistake it for something different. I advise you to think, okay, what is Times, what is New, what is Roman is a separate thing. So always put double quotes there. Now you can see it change. Let's try Comic Sans. I don't know if you know this classic kind of children like font. Comic Sans a mess. So you can play around, choose your own fonts there. Okay. Now let's talk about making something bold. And for that, I'm actually, let me so remove this. Let me make the background color white, the color black. So it's easier for us see and well, px. So maybe 14. I want to make it bold. How would I do that? Now it's called a font weight. So font dash weight colon and now the values here, bear with me. You can type bold. That's one way. But it's very, you notice we can type like names, like for the colors and everything. But actually there's a more precise way of changing this. You can have like different kinds of bold. For example, it can have 600, 700. So you can write that value here. So 600 like that. Let's see 500. 500 is pretty much no bold, right? 700. Okay. So that'll be the point of the font. Some fonts have different levels of boldness, but I think 600 is like the same thing as saying bold as a word.