All right, everyone.
So now let's apply styling to it.
So let's create a new stylesheet style
or CSS and let's link it to our HTML document.
Now, so in the head portion,
we need to add a link tag and inside the link
we need to give the location so the location will be style or choices.
Let me close the final version and let's open it in a split.
You let's close this.
So here is our style scissors file and the first thing that we can do
is we can select all the elements and we can set the margin to be zero.
So zero will be giving me margin zero
and P zero will give me padding zero
and I can set work sizing to be border box.
So box sizing to be border box.
Now let's move.
Let's first of all, select our border
and we need to give a background to this body, right?
So let's first give this weight and height to our body.
So body is selected and let's give the weight
to be under the W and the height height to be handed.
We at the candidate like this and let's add
and now we need to give our background.
So let me do one thing.
Let me copy this image.
Let me copy the part of this image or let's do one thing.
Let me copy Teo and let me paste it outside
this for look after that, we need to close it
close from here as well.
So body, we need to give background
and background image in order to give it the image.
We need to give it a like you are in
and inside there you are all I need to give it that location.
So image the dash.
This is unsplash shadow tool slash for giving me this image
so once less
dart jpg Great.
Now we don't want this background to repeat, but
let me see what our project is looking like so far.
So the one thing that will allow you while you're working with such project
is that you need to everytime save your project
and in order to avoid saving every time you can enable this
autosave option, now your project will be automatically saved.
Now here is our
ping pong project.
So this is what it is looking like.
Now let's do one thing.
Let me set the background properties now
so the background size will be GOA,
background size will be Goa
and we need to Goa no repeat to background.
So background repeat will be no repeat.
So I have just dived in bhaiya and this will give me background
repeat if I type obs then this will give me.
sorry b d s.
If I type various beads then this will give me background size
and the default value for this is can be right.
So in this alone one let me remove this
or I've just accidentally removed my parenthesis as well.
Now I need to give my body a display of flex.
So this will give me a display of flex
and I need to justify the content as center.
So justified content as send this I will be this
I am doing in order to center the container that we have.
Right. So this is the portion.
This is how our project is looking like so far.
So we got our background to cover the whole canvas.
We got the main with and we got the height as well.
So now we need to style the container.
Now let's select our container and let's see what else we can add here.
So first of all, we can specify a size for our container outbreak outward tonight.
So let's set the weight as 600 pixels,
not 500, 600 pixels and the height
as let's say 400 pixels.
If you're typing for edge 400, this will simply give you a height of 400 pixels.
Now we need to display our scoreboard as a vertically
so we can write in as a display of flex and we can set the flags
that action as column.
So beef and no flex detection will be flex detection will be column.
Now, after
that, all we need a margin top as well.
So I don't want this addressed to the top five
so I can give it a margin top as empty will give me margin top and one.
Then I can add a margin top of one one to them and let's see how it looks
perfect.
So now what we need is we need to give a color to our container.
So the color will be for these text.
So let me see what color that I have added.
So the color was odd. DB
Odd.
DB And the values here are 60,
60 and 60.
I need to change it again.
So here it is, 60, right?
So this is the color.
Great stuff.
So let's see what it is looking like so far.
Now what we need, we need to select the top portion.
So the top portion here that we have is our H1 bag.
So I can specify the container
container and I am selecting H1
and I need to add a symbol with the container as well.
Now in the top portion, I want the weight
to be 100%, weight to be hundred percent.
And I want on this to go to the same though.
So I want my dex to be displayed to this.
And also the text aligned would be
aligned.
Would we send the
now we let me see what else we can do.
So our text is on send go and we can send the font size as well. So
basically all we
need to select all the edge ones, we need to select
the H1 that is just after this container so we can add this
and then select selector.
And this will probably jeans that is old.
So we had to selected the first H1.
Now, now let's see how we need to add the font size as well.
So let me set the font size affairs to be five grams.
That would be sufficient.
Now what else do we need?
We need to give a color for this a scoreboard.
So this is not the font style.
We need the font size. Font size.
I actually don't remember the television for it.
You can go ahead and look at the teacher that I have provided you.
So corn child would be five them.
So after that, let's hit the hotkey control and to the move to the next line.
Now we need do.
What we need is we need to give it a color.
So this is the color that we have.
So the color that I have used is basically a shade of white.
So the color that I have used is, let me see.
Yeah, that's less blue and less blue.
This is the color.
And what else do we need here?
Do we need anything else?
No. I think that this is it for styling the H1.
Now let's move.
Let me just remove these extra spaces.
You can also use the hotkey control X to delete the line.
Now let's see.
we need to style this portion.
So let's let our guard first.
So I selected the card and inside the card
we need to give our background color because you can see
this is the card and it has a background color of white.
So let me give it a background color of color of white.
Now, what else do we need?
We need to make the border.
We need to make the border rounded so we can give
the border radius to be 25 pixels something.
The blue I remember because I have already used it.
So border radius and we can give it 25 pixels.
Great stuff.
Now we need to also give a height
to this car and the height would be 100%
and height should be 100%.
And we need to give it a margin top as well
because we don't want it to be
so much close to the H1.
So let me think.
We can give it a margin top of two, then some something
margin top has two, then
that's not V, that's it. Then
let's see what it is looking like.
I think I have just given a lot of margin top.
Let me just make it as one RAM
and that should be fine.
Let's see what it is looking like now.
Yeah, that's looking fine.
Now let's see what else we can do.
We need to know, select this and style this.
So let us select this H1 so you can see
this is inside the card and this is just after the H1.
So I can select it like, by the way, we don't have any H1 here, so I can write
it simply like card and then H1 and then be born the point size for this.
So first of all, we can make it text and I n
to be center text online to be center.
And after that we need a foreign size for this.
And the font size that I have use this font size
that I have you is this for M and we need to also give a margin as well.
So this is what it is looking like.
We need to give it a margin top.
So the margin top would be something like
one room for top and bottom and zero for site.
So M margin would be one them.
And we need to add as you value four sides as well.
Now let's see if we need to add something else to it.
I think that that's sufficient for this heading and now we need to select
this middle portion and that's going to be tricky now.
So let's select the first paragraph of this middle portion.
So by the way, this is going inside
in vertical direction and we need to go it like always.
So I can just wrap it around the div and I can give it.
Our display of flex and flex direction ought to be
a little.
So let me do one thing.
Let me add a do inside this, a middle position.
So here we need a middle portion.
And inside this now we need to place these things.
So let me go straight from here and let's placed it here.
So this is the change that I have made in the HDMI and file.
Now let me select the middle portion this def
and then
this middle portion.
For this middle portion I will be first of all displaying it as a flex
so leaf and I will send the flex direction to be it.
Also, the default one is okay, so I don't need to change it now.
I need to give it a margin top as well.
So let's see, margin top of our own.
I think one of them would be or two of them would be sufficient.
So let me add margin toppers to them
and the margin are from the left side as well.
So I need to make it a little bit separated from the left hand side.
So margin left to be something like one rim should be sufficient.
Let me see
this.
Pretty much it now we need to style this paragraph text so we need to select
this and I have given the idea for this paragraph.
By the way, this is not required.
I can just simply select the middle portion and I can
select the paragraph that is inside it.
But let's use the 80
winning scope
and we need the font size for this paragraph.
So the point is that I have used this on 1.3 times,
1.3 times, and
we need to give it a font with as well, because this is very thin
and I think that I can make it look mobile.
So the point weight,
font weight would be something like bold
and we need to also give it a spacing
all from both left pen or right hand side as well
so I can go with the margin and padding as well.
So margin right, I think margin right would be three times
that should be sufficient for this.
And the margin left or something a margin left as well.
So margin left of one rim would be sufficient.
Now let's see.
I think that we also need to give it a padding to center it out.
So this is our element and I will be giving it
a painting of top and bottom to make it to the center.
So padding would be five pixels
for top and bottom and zero pixels, four sides.
Great stuff so far.
Now after that, all we need to style
this sector and our two buttons.
Basically we had three returns.
Where is our third button?
I just forget to add our third button.
So let me just quickly add our third button now.
So we end with the idea of the reset
and with a place or low value of what we said.
And let's head back and this is the third button.
Now, that's fine.
So I will be styling this select options and the buttons in the next lecture.
So see you there.