0:00
This is CSS for Beginners Lesson 31 and in this video we're going to talk about transforming text
0:11
That's coming up. Right now before we go into the code, what exactly do we mean by the word transform
0:17
Well, by that we mean change the letter casing of a word. So in this example here we've got the word hello and then if we change it to this version of hello
0:24
where we've capitalized the first letter, we've got a capital letter, we'd say that transformation is capitalization
0:29
So it's all to do the letter case in here, yeah, from lower to uppercase. So now we know that
0:34
Let's jump into the code and have a play around. All right there. So there is not much to cover in this video, but I do want to show you a few things when it comes to text transform
0:43
And we're going to transform the text of a few different elements on this page. So let's get started with this P tag here
0:48
And it's inside the header. So we'll do our header selector first of all, that ID, and then grab the P tag within that
0:55
And that's just going to grab this one here. And we want to apply a text transformation to this
0:59
element. Now the property name for transforming text is simply text hyphen transform. That's all you
1:05
need to remember And now brackets is giving me this selection here Capitalize We see in a minute I going to do that for you Full width I not going to go through because probably you never need to use it Inherit we already know what that does It just inherits the style from the parent element
1:21
Lowercase forces everything to be lowercase. None makes sure that no text transform can be applied to this element
1:29
and uppercase makes everything uppercase. So we're just going to see what a few of these do
1:34
First of all, we'll capitalize. And that's going to be for this PTAG here, remember
1:40
I'm going to save this now and let's have a look what it does in the browser
1:45
Okay cool so that's this sentence here. Every letter, every word rather now has got a capital letter at the beginning
1:56
So that's what capitalized does. It takes every word and it gives it a capital letter
2:00
You can see in the code that's not the case. You know we've not got a capital letters except for the first one here where it says welcome
2:06
But in the browser it capitalizes every first letter of a letter
2:10
every word. All right. So that's really good for titles. Now, what else can we do? Well
2:14
let's go after these p tags here. We'll just say, um, body direct descendant P. And that's
2:24
just going to grab these here remember because these are the only direct descendant P Oh and this one here so what we do is we give these now a text transformation of uppercase
2:36
if we can spell it right there we go up a case you are is no you've got it right
2:43
in brackets because it'll be orange otherwise it's not going to be any color whatsoever
2:46
well it'll be black so let's save that and view it again in a browser
2:55
And that's not worked, which is absolutely brilliant, just what I expected
3:00
Have we done? All right, text transformation. That's why guys, don't pay any attention to me
3:05
Go and find someone else to teach your CSS, seriously. Let's view this again then in a browser
3:14
Okay, cool, there we go now. So all these are now capitals
3:18
So that's what uppercase does. And I'm pretty sure you'll know what lowercase does
3:24
it's gonna make everything lowercase so you see here these are all capitalized
3:29
and this one is here well hopefully they're gonna disappear now yeah there we go all these hello their ninjas they don have a capital H anymore and this welcome at the top no longer has a capital W So capitalize inherit lowercase none uppercase
3:54
That's about it, guys. We'd apply this non-rule here. Say, for example, this P-tag is inheriting a text transform
4:03
Say we've got the body selector here, and we're saying, okay, text transform
4:10
uppercase, yeah? So by default, every element in the body tag is going to be transformed to be uppercase
4:17
Including these P tags, including these H1s and H2s, everything, right? However, say we don't want these P's here or this P to inherit that style
4:25
Well, we can put text, transform, done, and that's going to override this uppercase
4:30
So, that's about it. I said this was going to be pretty short, just under five minutes
4:34
If you have any questions about this whatsoever, feel free to leave a comment. I'll answer all of those as soon as I can
4:39
Otherwise, if you enjoy these videos, please subscribe or like or share, and I'll see you guys in the next one
