1
00:00:00,690 --> 00:00:09,390
Hello and welcome to this lecture in this lecture we are going to create the styling for our app using

2
00:00:09,420 --> 00:00:12,710
CFS.

3
00:00:12,930 --> 00:00:19,550
So this is the styling where we use for our app from the external CSF file.

4
00:00:19,830 --> 00:00:23,260
So I'll just run through the styling with you.

5
00:00:23,550 --> 00:00:28,540
Line 1 to 5 is the first selector.

6
00:00:28,710 --> 00:00:37,830
So we are using the button one I.D. selector that button one was defined in our hasty AML.

7
00:00:38,340 --> 00:00:46,830
So what I'm saying here is that the pattern padding refers to the space inside the element while margin

8
00:00:46,830 --> 00:00:49,470
refers to the space outside.

9
00:00:49,470 --> 00:00:55,050
And they both have four corners which is top right bottom left.

10
00:00:55,050 --> 00:01:03,110
So I've said one the padding to be 10 pixels for all the four corners Top Right Bottom Left border radius

11
00:01:03,120 --> 00:01:12,000
or specify the to be 30 pixels border radius makes is what that gives us a square or rectangle there

12
00:01:12,070 --> 00:01:21,370
around the round corners have set the background color to lime pore pattern.

13
00:01:21,630 --> 00:01:29,940
No I'm I've got about an idea here call button and are again in 10 pixels.

14
00:01:29,940 --> 00:01:37,060
Similar styling with the first button and then of course targets.

15
00:01:37,140 --> 00:01:38,970
I've got an image.

16
00:01:39,030 --> 00:01:40,660
This is the image tag.

17
00:01:41,070 --> 00:01:48,600
I've said the with four or the image so all that I want all the images to have the same size and height.

18
00:01:48,600 --> 00:01:50,240
So this is where I've set it.

19
00:01:50,250 --> 00:01:55,650
I want the weight to be 9 5 8 pixels and the height five seven eight pixels.

20
00:01:55,650 --> 00:02:02,310
You could play around with it values and change it if you wish just to see the one that suits you best

21
00:02:03,440 --> 00:02:05,010
of Go or another.

22
00:02:05,100 --> 00:02:07,260
I've got a class here called wrapper.

23
00:02:07,290 --> 00:02:10,350
This is the container and I've set the margin.

24
00:02:10,350 --> 00:02:15,750
This is the wrapper is what will wrap the images each what is what will form the main slider.

25
00:02:16,470 --> 00:02:22,880
So I've set the margin from the left to move a hundred pixels.

26
00:02:24,160 --> 00:02:24,930
So that's it.

27
00:02:24,930 --> 00:02:26,720
The five save the styling.

28
00:02:26,730 --> 00:02:30,810
Then we can have a look and see what the project looks like.

29
00:02:30,810 --> 00:02:40,560
If I just refresh you can see this tiling the margin from the left eyes I used is move this from the

30
00:02:40,560 --> 00:02:43,930
left one hundred pixels shifted it that way.

31
00:02:43,960 --> 00:02:50,980
Okay so we've defined that using we defined that using this margin here.

32
00:02:50,990 --> 00:02:57,600
So what I'm saying that from the left I wanted to shift a hundred pixels which is what he because he

33
00:02:57,600 --> 00:02:59,160
was previously at the corner.

34
00:02:59,490 --> 00:03:03,090
So the margin has now shifted 100 pixel this way.