0:01
Hi friends, welcome to tus funny
0:04
channel. Today I'm going to teach about
0:06
the CSS. Okay, so if you have watched
0:09
this video, you will be able to do the
0:12
simple web pattern. Okay, very simply
0:15
code. Okay, so first you have to open up
0:18
your VS code editor. You have to create
0:20
the file index html. You have to hold on
0:25
the shift key plus and one. You can get
0:27
this mark and import them here. Okay.
0:29
Now what I'm going to do is I'm going to
0:36
header. So you have to type do
0:46
you don't need to type class view dot
0:49
you have type uh let's type content.
0:54
Okay. Press the tab key on your
0:56
keyboard. It automatically take care of
0:58
it. Okay. Now what I'm going to do is
1:01
here I want to create three items. So
1:07
here a three. Press the tap key on your
1:10
keyboard. So here we have to leave one
1:13
mistake. Due dot item aster press tab
1:18
key on your keyboard. So it don't create
1:21
it didn't create it. So here I'm going
1:25
item aster 3. Press tap key on your
1:28
keyboard. Three item has been created. 1
1:31
2 3. Okay. This one for I'm going to set
1:36
This one should be the menu uh new bar.
1:40
Okay. Links. This one should be one bar.
1:44
Okay. So these are the three we have to
1:47
separate three things. Okay. Very
1:50
simple. Okay. This for logo, nav bar and
1:54
so how how would we create this one? So
1:56
we have to go to here you have to make a
2:01
but the style open and close it. Okay,
2:04
what I'm going to do is here first I'm
2:05
going to go to style the logo I'm going
2:17
okay prime okay so first I'm going to
2:20
create the color logo tobo
2:24
open and close bracket logo I'm going to
2:26
write font family you have to select
2:30
this one okay font size
2:35
30 pixel let's put 50 pixel
2:54
uh green color so you type green okay
2:59
after generate the color you will be
3:00
able to adjust the Okay, let's keep as
3:03
it is a green. Okay, so let's save all
3:07
right. So let's right click and reveal
3:10
the product here. We have to see what
3:15
Okay, this one should be our logo. So
3:17
this logo I'm back to the I feel that uh
3:23
big. So 30 controls to save and bring
3:27
back to the application again and check
3:29
them. Okay, this is okay.
3:33
This should be okay. So, we will be able
3:35
to change the color font style as well.
3:38
So, I'm going to go to this one. Not
3:40
good for this, right? We have to change
3:43
this one as well. Control to save and uh
3:47
after the uh check now it seems to be
3:52
okay. The logo is seems to be okay.
3:54
Okay. So, simple text logo we have
3:56
decorated. So after that what I'm going
3:58
to here have to do this a body
4:02
we simply have do it body padding zero
4:13
you have to apply this
4:16
control save after that what I'm going
4:18
to I'm going to do the new bar section
4:20
you have to write a new dot new open and
4:24
close it implement the display flats
4:31
Okay, this so now what I'm going to see
4:34
here I'm going to add some links. So
4:37
links how to add you write de
4:44
a for press tab key. This one should be
5:04
Okay. So now what I'm going to say right
5:06
now display justify contain center
5:11
align contain center.
5:15
Okay. So you write implement the flexbox
5:18
justify contain center align kind of
5:21
center. Let's save all and bring back to
5:23
the application. Check what happen. The
5:28
here. It's coming like this. Now what
5:31
I'm going to do is I'm going to do the
5:36
let's this all things are coming
5:38
successfully here. Now I'm going to go
5:43
uh we have to in between this elements
5:46
we have to need a gap. So gap we have to
5:52
Let's check it 10 pixel here.
5:57
Now I'm going to the main container. I'm
6:00
going to see the main container.
6:03
Main container. I'm going to didn't
6:06
style it main container also. I'm going
6:08
to type implementing the flax.
6:46
save. Bring back to the application.
6:48
Check what happened here. It's simply
6:51
here we successfully done the
6:55
header. Very simple. Now I need one
6:57
button. So how to implement the button?
7:00
So button also we have type input
7:04
type button class we have write btn.
7:10
Okay. value we have to add as uh
7:16
Okay. So I'm going to implement the
7:18
style for the button for this class. So
7:22
write here as btn open and close it. You
7:26
have to write how to add the buttons.
7:28
First you have to add the padding.
7:33
10 pixel is nothing but top to bottom.
7:38
uh 200 take here also 10 pixel left to
7:41
right okay you have write a padd
7:51
padding we have write a padding right
7:53
now what I'm going second one we have to
7:56
write a color background color we have
8:04
color you have to make it as
8:25
border we have to write border uh we
8:28
have to write 2 pixel
8:37
5 pixel we have implementation So all
8:39
things here consist of this button then
8:42
only buttons are look good right now.
8:47
Yeah, it's working. So let's
8:50
uh do the arrangement
8:53
after that that uh that feel the font
8:55
size is little bit big. Let's do that
8:59
arrangement. Now it's feel it's too much
9:03
boring. 15 is enough I think.
9:13
I I did the simple one. Okay. Simple
9:16
one. I did it very simple one. Okay. The
9:19
nav bar also I haven't put the font
9:22
size. Font size also applicable
9:29
Now let's bring the application. Check
9:38
I think already the font size has been
9:46
Okay. Yeah, it's working. It's
9:48
successfully working. Now you have to
9:50
make the background color as well.
9:56
this color. Control S to save. Bring
9:59
back to the application. Check here.
10:01
This is the way we have a simple
10:05
very simple we have did the application
10:09
very nice very professional header I
10:13
have print to it very simple okay so
10:16
they have now you will be able to
10:18
understand this also the color if you
10:19
want to change any other bar color you
10:22
change this one as a color red.
10:31
See the color has been checked as red.
10:34
Very simple. Now I want to change it as
10:47
Okay. B is not good. You have a regular
11:30
Okay, now we have did success.
