Styling Text

[00:00:00]
>> Kevin Powell: We can jump on over to the next section, which is styling text. There's a lot of text-related properties in CSS. In my experience when I'm teaching beginners, especially I remember being in the classroom when I'd be teaching, and you'd get the very, you know, the color red, everyone's excited, it's changed, and then background blue, exciting, and then all of a sudden they start styling text and this is like a small sample of some of the properties and the overwhelm starts of like, wait, how many properties am I going to have to remember when I'm doing CSS and then all of them have more values and it definitely early on can feel like there's a lot.

[00:00:36]
Don't memorize anything. The ones you use the most often, you're going to be using like 30 times within 10 minutes and they just become muscle memory, and then the ones that you're using less often, worst case, you search "how do I make text italic," and then you find it very quickly. So it's not too, not that bad at the end, but it can seem like a lot if you are newer to CSS. I'm not going to run through a demo on all of these.

[00:00:59]
We're just going to be sort of using them as we're going. They're all very descriptive of what they do. Font weights make things bolder or lighter. Styles is for italic. That's the one that I always forget, just because I don't make text italic very often. Text align, we will talk a little bit about it actually, but most of these, they're relatively straightforward, so as they come up, we'll use them.

[00:01:19]
I do have some lessons coming up on font sizes and font families though, so we'll talk more about those in more detail. The one that I do also want to mention though, I said text align. This is another one we're talking about modern fundamentals. If we're doing text align, the ones you're going to be doing, you have a text-align start, a text-align end, which is going to push the text to the end. So you can see here the text is now lining up on the right side, and if I change that to start, it goes to the start, which is on the left side.

[00:01:57]
The other one is center. Center is pretty easy to understand. A lot of people who are maybe seen CSS or even if you've done a beginner tutorial, you would have seen left here instead of start. Anyone see why? It was sort of sneaking down here at the bottom. Yeah, there's right-to-left languages, yeah. So there's right-to-left languages and there's also vertical languages as well, which this is a vertical language.

[00:02:30]
It's, I'm, Korean, maybe. Sorry, I've made this demo a while ago, but if I do a start, it will actually be the, let's let it update. Oh, it's working properly. Maybe it, oh, there we go. But start will respect the vertical languages as well. That one looks a little busted. I'm not sure though, but it will respect the vertical writing modes as well as right-to-left and left-to-right languages. You might be saying, but Kevin, I'm only ever making my websites in English.

[00:02:59]
You don't know how people are consuming your websites. People translate websites. There's lots of other things they can do, and you don't know. So if they're translating your site and you're using the physical properties which are left and right, it won't update. If you're using a logical property, it means it's going to look at what the language being applied is from the browser, and this is where the writing direction will be set by the browser for these things.

[00:03:25]
And so if you do start or end, then it's automatically updating without you having to do anything else. It just makes our life super easy. We're going to be talking a bit more about some other logical properties as we go through. The reason it's start and end is we're just looking at that axis, like left to right. Start is the beginning of it, end is the end of it. That's as simple as it is. So a left-to-right language, the end would be the right side.

[00:03:55]
In a right-to-left language, the left would be the end side. So an important one to take a look at. And yeah, for font weights, just really quickly, you'll see either light, normal, bold, or you can see it with numbers. The numbers map to the values like light, normal, bold. I tend to use numbers for my font weights just because it's easier than remembering, is it normal or is it regular? I mix those up, so I just use 400 because I know what that is.

[00:04:21]
Different fonts come with different font weights. We'll see more about that very soon. And really important, there are keywords like lighter and bolder as well. Strong actually uses font-weight bolder. So it's going to go from 400, if the next font weight is bold, it will jump to 700. But if you've set your text to 300, which is a thinner font, then it will jump up to the 400, not to the 700, if you use a strong, just an important one.

[00:04:51]
It used to be there was inconsistency in browsers there where they work differently, but now they all work the same. Font style is to make italic text, so normal italic. There is an oblique keyword. Don't worry about oblique, just use italic. You'll be fine, and anybody who knows more about typography, maybe you know when you might want to use an oblique. They'll most of the time look the same, and when they don't, italic is the better one to use anyway.

[00:05:18]
So just font-style italic. I forget this all the time. I always do text italic, and it doesn't work. So there's that one, and then text transform, you can make uppercase, capitalize, lowercase, or not change anything. Again, don't memorize these. There's too many of them. Over time, you're just going to build up the muscle memory and start remembering which ones you want to use. Some of them you're using all the time, other ones less so, and then you just have to look those ones up.