Hey guys welcome back to a brand new lecture.
This is another bone's lecture of this whole bonus section that I have been preparing for you as a gift.
So without further ado let's start or let's continue where we left off the last lesson and that was
creating the market right now in this lecture we are going to be starting to create this CSSA 3 styling.
So without further ado let's start first off we're going to do a selection of all the things on our
website and you are already familiar with these.
We do it is by selecting the star and then opening up the brackets and I'm just going to write box sizing
border box and these basically removes all the default margins and paddings that the elements have.
And we are getting a brand new canvas so always make sure that you select all the items with the star
and then writing box sizing or order box and that's all.
So now this leg dropper which is basically this whole Web site that we have as we can see here in the
HMO or the wrapper holds everything.
I did this pleade view so you can see better live as we are coding and text editor.
Everything is appearing here in the Chrome browser so we're selecting the wrapper.
And now let's go to our Photoshop file to see how the web site looks.
And if we want to calculate the wrapper so this here would be open wrapper we're going to pick the rectangular
marquee tool and then we're going to Conklin's from one and two with the other which is basically exactly
eight hundred and eighty pixels.
All right so we're going to go back to our brackets coordinator here and we are going to write Maqsood
with us.
Eight hundred eighty pixels and there is our Viper with the max and now we've moved right margin of
the zero on top and the bottom and toe on the left and right we can see that the website is now centered
in the middle legist right.
The background color to be white just in case.
And now we can see that this text is very aligned to the left here and we don't want that.
So as you can see here in the future profile there is some padding here and the right there also right
here.
So we want to add that padding because otherwise it looks bad.
So if I calculate the space between here and there it's exactly 55 pixels.
So what I want to do now is write padding.
So it was zero pixels on the top and bottom and 55 pixels on the left and the right.
And we can see that spacing is presented here on all the wrapper are right the next thing that we want
to do.
We're slowly getting there at the end of the lecture we will compare how this looks with our finished
ph file for now just VEIDT slender body and let's change the font of the whole body so just right font
family and it's going to be open sans the font that we've included in the earlier lesson here.
As you can see the Google font called Open Sants.
We're going to write open sand's and then sensing if and then let's try to become the font size and
to depression t and then clicking on this any paragraph here and we can see that the font is 80 pixels
18.
So I'm just going to write font size 18 pixels and background as you can see in our Photoshop file of
the whole body is this.
So if I pick a color brush here absorb it and if I press on alt click and then here inside the color
picker we can click on that and then copy the code OK and then paste the code as a background to the
body and we are getting the exact thing that we want here.
So the background of the body of the remaining body is this dark gray and the inside of this content
wrapper.
We have our content.
And one more thing before we wrap up these Bolen's like church is if we select old paragraphs inside
our document here.
So there are plenty of them.
We can see that they're all clustered here and they're not as good as here so we have some spacing here.
What can we do that.
Well if we select all the beats and if I now right we'll just make sure they are all 18 pixels and add
some line height as you or you know five pixels than their actual font size.
Twenty four.
Now everything looks good except that these are clustered so not five right here.
Margin bottom of 20 pixels we can see that beneath every paragraph here there is a margin of 20 pixels
right here right there right there.
So I don't have to do this manually for all of the year because if I select all of them and a margin
bottom we can see what happens here.
So there's a margin to every paragraph on our website or I guess we are slowly getting there.
So the final B is the Luc's.
OK.
And this is how our Web site looks so far.
So we are getting closer.
Join me in the next bone's lecture that will be up in the upcoming days.
See you there.
Thank you for watching.