WEBVTT 00:00.650 --> 00:03.710 Hey guys welcome back to a brand new lecture. 00:03.720 --> 00:11.420 This is another bone's lecture of this whole bonus section that I have been preparing for you as a gift. 00:11.430 --> 00:19.350 So without further ado let's start or let's continue where we left off the last lesson and that was 00:19.350 --> 00:27.130 creating the market right now in this lecture we are going to be starting to create this CSSA 3 styling. 00:27.210 --> 00:35.190 So without further ado let's start first off we're going to do a selection of all the things on our 00:35.240 --> 00:38.230 website and you are already familiar with these. 00:38.250 --> 00:43.990 We do it is by selecting the star and then opening up the brackets and I'm just going to write box sizing 00:45.090 --> 00:53.300 border box and these basically removes all the default margins and paddings that the elements have. 00:53.580 --> 01:01.620 And we are getting a brand new canvas so always make sure that you select all the items with the star 01:01.650 --> 01:06.210 and then writing box sizing or order box and that's all. 01:06.210 --> 01:14.190 So now this leg dropper which is basically this whole Web site that we have as we can see here in the 01:14.250 --> 01:18.130 HMO or the wrapper holds everything. 01:18.550 --> 01:24.940 I did this pleade view so you can see better live as we are coding and text editor. 01:25.050 --> 01:31.920 Everything is appearing here in the Chrome browser so we're selecting the wrapper. 01:31.920 --> 01:36.340 And now let's go to our Photoshop file to see how the web site looks. 01:37.290 --> 01:44.340 And if we want to calculate the wrapper so this here would be open wrapper we're going to pick the rectangular 01:44.340 --> 01:53.240 marquee tool and then we're going to Conklin's from one and two with the other which is basically exactly 01:53.330 --> 01:56.430 eight hundred and eighty pixels. 01:56.450 --> 02:02.960 All right so we're going to go back to our brackets coordinator here and we are going to write Maqsood 02:02.960 --> 02:04.660 with us. 02:04.790 --> 02:14.360 Eight hundred eighty pixels and there is our Viper with the max and now we've moved right margin of 02:14.360 --> 02:22.030 the zero on top and the bottom and toe on the left and right we can see that the website is now centered 02:22.090 --> 02:23.840 in the middle legist right. 02:23.860 --> 02:29.450 The background color to be white just in case. 02:29.710 --> 02:37.820 And now we can see that this text is very aligned to the left here and we don't want that. 02:37.820 --> 02:46.090 So as you can see here in the future profile there is some padding here and the right there also right 02:46.090 --> 02:46.300 here. 02:46.300 --> 02:49.850 So we want to add that padding because otherwise it looks bad. 02:50.080 --> 02:59.210 So if I calculate the space between here and there it's exactly 55 pixels. 02:59.240 --> 03:03.780 So what I want to do now is write padding. 03:03.800 --> 03:10.710 So it was zero pixels on the top and bottom and 55 pixels on the left and the right. 03:10.730 --> 03:19.610 And we can see that spacing is presented here on all the wrapper are right the next thing that we want 03:19.610 --> 03:20.930 to do. 03:20.930 --> 03:27.500 We're slowly getting there at the end of the lecture we will compare how this looks with our finished 03:27.500 --> 03:36.550 ph file for now just VEIDT slender body and let's change the font of the whole body so just right font 03:36.560 --> 03:42.740 family and it's going to be open sans the font that we've included in the earlier lesson here. 03:43.670 --> 03:46.500 As you can see the Google font called Open Sants. 03:46.520 --> 03:56.100 We're going to write open sand's and then sensing if and then let's try to become the font size and 03:56.160 --> 04:04.170 to depression t and then clicking on this any paragraph here and we can see that the font is 80 pixels 04:04.350 --> 04:04.950 18. 04:04.980 --> 04:14.220 So I'm just going to write font size 18 pixels and background as you can see in our Photoshop file of 04:14.220 --> 04:16.800 the whole body is this. 04:16.830 --> 04:25.080 So if I pick a color brush here absorb it and if I press on alt click and then here inside the color 04:25.080 --> 04:32.940 picker we can click on that and then copy the code OK and then paste the code as a background to the 04:32.940 --> 04:37.920 body and we are getting the exact thing that we want here. 04:37.920 --> 04:45.420 So the background of the body of the remaining body is this dark gray and the inside of this content 04:45.420 --> 04:45.930 wrapper. 04:45.930 --> 04:48.060 We have our content. 04:48.270 --> 04:55.650 And one more thing before we wrap up these Bolen's like church is if we select old paragraphs inside 04:55.680 --> 04:57.320 our document here. 04:57.420 --> 04:58.820 So there are plenty of them. 04:59.100 --> 05:05.160 We can see that they're all clustered here and they're not as good as here so we have some spacing here. 05:05.250 --> 05:06.170 What can we do that. 05:06.180 --> 05:15.900 Well if we select all the beats and if I now right we'll just make sure they are all 18 pixels and add 05:15.900 --> 05:20.320 some line height as you or you know five pixels than their actual font size. 05:20.380 --> 05:21.860 Twenty four. 05:21.970 --> 05:27.060 Now everything looks good except that these are clustered so not five right here. 05:27.090 --> 05:35.790 Margin bottom of 20 pixels we can see that beneath every paragraph here there is a margin of 20 pixels 05:35.910 --> 05:38.160 right here right there right there. 05:38.160 --> 05:44.340 So I don't have to do this manually for all of the year because if I select all of them and a margin 05:44.380 --> 05:46.730 bottom we can see what happens here. 05:46.920 --> 05:53.760 So there's a margin to every paragraph on our website or I guess we are slowly getting there. 05:53.790 --> 05:56.490 So the final B is the Luc's. 05:56.550 --> 05:57.130 OK. 05:59.910 --> 06:04.010 And this is how our Web site looks so far. 06:04.020 --> 06:06.030 So we are getting closer. 06:06.030 --> 06:11.460 Join me in the next bone's lecture that will be up in the upcoming days. 06:11.460 --> 06:12.070 See you there. 06:12.090 --> 06:13.300 Thank you for watching.