Tailwind Essentials: Styling Text

CSS Tailwind CSS
Transcript

English (Auto-generated)

actually we're gonna style some text. So when we're talking about text specifically here so I think we need to have a new div first of all so this you know this is a great and this grid can have only one column. We can increase it by the way but I want one column right now and inside this one column I'm going to have the the P. Tag. Okay and here this is the paragraph. Whatever I want. I can write she um I got it I got it. Okay now um if I go to the browser this is the text I wanted and um this is the device and I want this to be colored. This is the column actually and I want the column to be colored a little so B. G. And what color I'm going to apply. There are many colors I can apply not the green. Let's go with the teal color. Save it, go to the browser. Okay I've got the color I think the black suits. Uh But what if I make it a class name? White. Simple. White. Plain white. Okay this is a text white. Okay and we got it. Now this is the div you can see that uh and this is a text, the paragraph and absolutely this is also covering the whole line because it's a block level element. And just imagine if you want to align the text in the CSS you do something like that. I'm just doing hypothetically text align you know if you want it at the right side to. Right right okay if you want it in the center, you right center but we are not doing this way because it just even cannot work this way, but we're doing it this way text right now, the text should be on the right side and you can see that the text is on the right side. Similarly you can have the text in the center, you just need to right center and you got the text in the center. So I think textile lining is pretty simple here and absolutely, if you want the text on the left side, which is we do not need for now, but if you want to you can just make it text left. So maybe you sometimes think why they give, you know the classes we we have by default for example, the you know listed style. None, we just discussed previously. So we by default have the this list of style, none. Then why they provided us. Actually there is only one reason, maybe for for some reason maybe you have hundreds of rows or hundreds of text paragraphs and you made them text right, okay, so you changed the by default settings for all of them and you want any individual to be on the left side, so you just can put something like that. So this is why we also have the default settings. Okay, so similarly there are more different styles for texting, you can do coloring and we already know a lot about colors. I mean we already have applied the text color. You know that if you want to put the color in the background you just need to use B. G. If you want to put the color on the text, you just can use the text instead of the PG. And then you choose you use the same formula. Let's just do it for once for the sake of you know finishing what we're doing. So text them, you just need to mention the color for example it's like you exactly have the same, you know the same way the zinc any color you want. Let's say we want this cone and then this is what I did and I'm gonna go to the browser, you can see that I've applied it. So I mean coloring is no point, you already know that and you understand it very well. Now let's just talk about the text decoration. So the text decoration is you need to add in a space and then which text decoration you want. You maybe want it. You know you know you maybe just want no lines. So you you go with none. So that's no underlying but maybe you want the underlying underlying and save it. Now you're going to have this text underlying, you can see the line here and I think this stone color is not cool. The the white works better and you can see that it is here and that's totally fine. Okay and then instead of the underlying you can go with the overline overline and go to the browser and now there's overline. I mean these are the basic things we already have in the in the simple thesis but you know we're just doing this sake of understanding the you know how the understanding the utility classes of the the treatment there is one more which is lying to row and save it and absolutely this is gonna be the strike. You can see that it has its own benefits. Maybe sometimes you want to cross and cross on some text put you know cut some text or maybe cut some prices and put new price. So this is a style you can apply. I just mean to say that there is a way to do such thing. Excuse me. Okay anyways uh I think uh we already had enough but there is one more thing when we talk about the uh the the underlying the lining actually the text decoration. So the text is maybe you know the text is uh white. The line is white by default but maybe you want some different things so that you use the text decoration color. But here you go with the text. Sorry not the text but the declaration now you can choose maybe you want the line to be black text decoration black and you can see that it's black now and maybe you want not the black but the rose roses. Wait a minute. Creation rose Okay we got the roads here and save it. Go to the browser, we got the rose line here. So this is the thing and I think we had it well and uh now when we were talking about the you know the lines on the text, I'm just gonna change line throw to underline for now and relying because this makes the text more visible. Anyway there are also some styles we do have but before applying this style, what about applying something like text um to excel save and then this is this is gonna be big but now you can see the the underlying properly. Now what I'm gonna do here is we already have the decorate decoration solid. This is the by default but maybe decoration double. Now go to the browser. We got double line. This is a declaration. I mean if you want the double line, this is this is his style. You know the text decoration is tile, maybe you want the dotted so just type dotted And you got the dotted one similarly you know you can have the way we or you can have the dotted dashed just go with the way before. Now this is the way we want. I mean if you want it or the dashed one. So these are some styles, some textiles. I think we covered a lot. There is one more property we do have which is specifically when we talk about the declaration and we have the opportunity to write, you know, I'm doing four. Okay, so what I did before. Okay, this is the thickness. Actually I have certain values 01248 for the thickness. Now the line is pretty thick, you can see that you can even have the eight here instead of four. Make it eight and then you're gonna have more thick the thickest line right here. And because of this much thickness, I'm going to change the colors so I would be able to know not good um, lime. Let's see. Okay, and that makes it visible. And also I'm gonna go from the dash to solid. We didn't when we are using solid. We do not need to mention that because it's a default value. Now you literally can notice the thickness if I grow with to this is pretty small. So that's how you can just control the thickness and uh I think that's enough for the, you know, text styling. So one more thing I think we should discuss when we already have enough talk of the, you know, declaration, let's just create a new one or let's just go with this one again. Okay, I'm just I'm just here putting something like upper case. Now you can imagine what it's gonna do for sure the whole texas uppercase now. However, it was not uppercase. Now if maybe you want the you want to capitalize each word capitalized and save it now. This has the T. S. Capital which was by default but the eye of is small here the I. S. Capital th again capital P. Is capital but here only tus capital so this is capitalizing and then you also have the option to make it lower case. Save it. And you know even the tea was capital. It is a smaller now. I mean this is a simple CSS property but you know we're just talking how we can use it now. The default classes normal case which is absolutely we do not need to use but there it is. This is a normal case. Okay. Um The P. Okay the P. Was capital. I didn't notice that before anyways I think this is you know the text transformation. So we already had enough talk of the text now we can move on to something else until then stay tuned.
118 Views 0 Likes 0 Comments

We go over the different ways of styling text using Tailwind.

Comment
Leave a comment (supports markdown format)