OK, so now what we'll do is we'll write some courses for styling our components right now and they
are looking really, really basic, like they are so basic.
So that's why I need to install them.
I need to style them.
So any sort install them.
So for that, first of all, I need to give the class names for all of them.
So first of all, I'll give the class name to this section, maybe, or this section I'll give a class
name of.
Class name of Dana.
And not yes.
Next, I'll give you a Glass Lewis input field right here so that we can style this input.
Last name would be like its class name would be varying.
What I'm thinking is that whenever a user type something, so then its borders should be different and
when the user types are like wrong or invalid or he types anything which is not valid.
But what I'm thinking to make the border read so that it indicates that there is an error and there
is a wrong input, which is a given.
And so for that, I will do it once I create a state for the error.
Next, we'll give a glass to the button or for Barton, I'll give a class name of class me of the tea
and.
I see.
Now I'll go to the index starts to assess how we mean I think the seats hit.
So I'll go ahead and I'll say.
With the last name of container for the container, what I need is that, first of all, the alignment
of the text will be central, so I'll be adding text align center.
Next, I'll be displaying it in a flex me of display flex.
So next, I'll be extolling the stern and learn a difference between tax alone surrender and a line
item center like a line item, senator.
What it does is that when there are two items in in a in a room not in a row, then it aligns both of
them in the center, irrespective of their hearts, irrespective of the sizes.
It brings more than the center, so that is what it does.
So that's why I'm using a line item center, a line, items and stuff.
And next, we'll be giving a highlight of how much maybe 100 bucks an extra.
Next, I'll be giving.
Let me just see how this looks first eyebrows.
Okay.
There is some changes.
Things have a line you can see this color generator was at the top.
But now it is aligned with the other component.
So now let me just go back here and there should be some padding on the left.
So maybe padding left could be foolhardy and.
Am.
I remember one a.m. as equal to 16 pixels, hold on, I can see go back.
And that is somebody.
OK, now I'll give you the styling to the H one, which is but isn't that so container at three on each
three?
Only braces and side this will give modern talk should be zero.
We modern thought it would be zero and next, I'll give it what I'm saying.
There should be a margin, right, because it's like getting too close to the side of the box, but
there should be a margin rate of five in five audience.
Let me see if that.
No, no, no.
That is too much that Eskom, which I need to decrease.
Maybe I can do it.
Who are you?
When I do it to?
The.
This is good, actually, because the size of the input also will be increasing once we style the input
component or we can see later on.
Let me just close this there are tools for now so we can like on the way we can change.
That is no compulsion that we have to do.
It finally hit on me.
This is the best part about CSIS.
You can see what you are creating.
So now we'll style the input component, this input tank.
So for that, we do.
We don't need to give any class as off now, but we just like grab the input things.
And now we'll start of this.
So for that, we'll be giving, first of all, partner color should be transparent.
And that shouldn't be happening because that things are too much closer to each other, so that should
be a bad thing, not panning out, just the padding and top and bottom.
There should be one.
No, maybe 0.5 40 ms.
This is for top and bottom and left and right.
There should be one idea Oh, let me see and go back because I didn't want to do this.
I didn't want to do this water.
That one be transparent.
So it looks a little cool.
Now, what we'll do more is that there should be a radius like top border radius so that I'll do my
border.
Maybe top and left, top left radios, and it should be like the air and.
When I this Australia's so let's see how this will look.
I'm explaining what I've done, Barton.
Yeah.
So as of now, we have not got anything.
OK, let's dive for that.
Well, basically top and left like border, it is given.
And now I'll give some bottom and left also.
So after that, we'll be able to see the reflected changes.
Bottom.
No, no, no, no, no.
Waterman left.
Florida.
And bottom and left radius will be giving a radius, yes, that will be vast, and that will be also
like of of radius.
And then I save it and then go back.
That is.
Fresh.
As of now.
Yeah.
I just commend these two lines.
Normally in work, maybe they will.
OK, so next, we'll be styling Burton.
But I am not giving foreign sides to the import.
Let me just give a foreign sized performed size should be maybe one point five odium would go one,
four and five.
Let me just check.
Not on one point five is a little bit bigger.
So I can just.
I can just give it one point two, maybe then I'll save it, and then I go, Yeah, looks good.
This much is like, okay.
OK, we have given everything to the input field and all we'll style apartment components, so for styling,
the bathroom will be the end.
And inside this will have some background should be like clearly and so we'll use this.
Styling, so not background color, basically.
It will be background and will be varying from this.
To the color primary, and because this will give the color.
Who are Barton or?
And you can see that is some happening.
OK.
Next, we'll add some padding to it, so adding, maybe I can give our top and bottom same as this,
same as this, I'll copy this thing and.
And Mr to Famous Next, I'll be giving a fawn size to the bottom.
So fine, guys, I will give of one point to what Im seen as that.
I save it, and I when I go back to that is I'm doing this, you can see and I'll go back and.
Now, I will add some more like color should be transparent, as we did in this.
And input for universal coverage is this line I just to two.
And the next will add these the same two things for distorting the button as well.
So then we'll see what magic they do and we'll.
We won that concert.
Let me just say it and take you to the air so you can see that is no nothing right now, but when you
click, it will add another stage to it.
Now I want to give like right now when we go to the button, it means to the point that is not changing,
so I will change that.
So we will do that by providing this first.
Two pointer and I save it and then go back and you can see no appointment is changing.
So now we started it for the so we can also give a color.
Thank you.
So first of all, let me try to transform the text.
Like when I exit.
Songs form should be capitalized just to make sure it's like in capital, so now I give up colored who?
Color would be variable and shouldn't be like clear white.
Right.
It doesn't do anything because, I mean, we need to install something or something like that, Marco,
we'll do it.
But to get that food, to get those calls, I will need to paste.
Unlike Vietnam, which I recorded song from Song, so this is the values of the caller.
That is what we are utilizing below.
So let me just say.
That's why I forgot to import it, and I know we can see and the colors are perfectly designed.
So that is what we were missing out.
So next, we'll be sailing, or we'll be adding like some functionality, which is just and ethanol.
We'll do that in the next week.