19. Text Transformation Slides & Code

				
					
p{
text-transform: uppercase;
}
div{
text-transform: lowercase;
}
span{
text-transform: capitalize;
}
				
			

Video Summary

All right, in this section we’re going to talk about text transformations. And basically text transformation is an easy way to format the capitalization of every character in a group text group. So maybe you have a paragraph or a heading that is already pre populated on the webpage and maybe you want to have every character capitalized every character in lowercase, or you can if you’re if you want you to capitalize the first letter of every word. So let’s hop into code pen and see how this works. So right now I have four paragraphs. I have a regular paragraph where the first letter is capitalized. I have a paragraph that every letter is not capitalized. I have a paragraph where the first letter of every word is capitalized, and then I have a paragraph for oh, they are all capitalized. I think it just be nice to be able to look at and see how we can transform these into exactly other capitalization that we want. So let’s try the let’s go tax transform. 

Now every character is capitalized, and now if we use capitalize every character is capitalized. Not every character the first letter of every character is capitalized. So if you have every character like this paragraph capitalized, you won’t see any change, but every other paragraphs that didn’t have every letter capitalized, it will change that right? Because basically, when you’re using capitalized, you’re just targeting let me put a semicolon at the end there. Basically you’re just targeting the first letter. So this is it’s do when you use capitalize on this paragraph, that’s what it’s doing. It’s if this was lowercase, for instance, let’s let’s make this all all lowercase. 

See now this is all still all capitalized. But what happens if I take those faces right now all those are back down to the lowercase. So this is a good way. This is a good way to play with the styling so that way, maybe you wrote off a paragraph, or a heading that’s like this, but then you’re like, Well, maybe what would it look like if all the first letters were capitalized so that way you don’t have to go back in and set up you know, delete this I put a capital I believe this a put a capital A delete this P put a capital P you can just come back over here and just see what capitalized looks like. You know what happens if it’s all uppercase? 

I think that looks good. So that’s a quick and easy way for you to transform your tax to look the way that you want it to. But again, be careful that if you capitalize everything, you can’t really go you can make everything lowercase, but you’re not going to be able to make all these other characters so sometimes it’s just easy to create the first paragraph that we have right here, and then you can play around with the different settings through CSS. With that being said, I don’t think this is was pretty self explanatory. So let’s hop over the next section and learn more about text.

PHP Code Snippets Powered By : XYZScripts.com