1
00:00:00,630 --> 00:00:01,750
Hello and welcome.

2
00:00:01,750 --> 00:00:09,520
In this fit you I am going to add some basic styling to make the clock more presentable.

3
00:00:09,810 --> 00:00:17,070
So this is what the clock looks like at the moment you can see that the actual Texas quite small so

4
00:00:17,070 --> 00:00:18,740
you can't see properly.

5
00:00:18,780 --> 00:00:20,500
So I'm going to make that bigger.

6
00:00:20,520 --> 00:00:24,140
I'm also going to add a background colour to this here.

7
00:00:24,150 --> 00:00:26,040
So they give it a different background.

8
00:00:26,250 --> 00:00:32,100
And I'm going to enclose a clock which is rendered inside a deed.

9
00:00:32,130 --> 00:00:39,790
I'm going to make that Deve scented here so and also give it a background colour.

10
00:00:40,140 --> 00:00:44,170
So I'm going to click on my CNS file here.

11
00:00:44,430 --> 00:00:50,280
And this is where I'm going to hand these here says stylin for the clock.

12
00:00:50,460 --> 00:00:55,120
So I have added this here says for Play a clock here.

13
00:00:55,120 --> 00:00:58,010
Here got the body elements or am this.

14
00:00:58,040 --> 00:01:05,460
I'm just giving the body a background colour of this collar here is escandon like a sky blue collar

15
00:01:06,140 --> 00:01:08,150
and a clock.

16
00:01:08,190 --> 00:01:13,710
I've got an idea a deep here called the clock by going to my index.

17
00:01:13,710 --> 00:01:17,250
This is what I am referring to this idea here called clock.

18
00:01:17,460 --> 00:01:22,920
So I'm steinmann that I'm giving it a lot of white.

19
00:01:22,920 --> 00:01:29,820
This is going to be the actual call of the text that will be displayed giving the font size of a hundred

20
00:01:29,820 --> 00:01:31,250
and forty five pixels.

21
00:01:31,260 --> 00:01:34,770
Notice the text on the clock is quite small.

22
00:01:34,770 --> 00:01:37,380
So here I'm going to use this to make it bigger.

23
00:01:37,680 --> 00:01:41,130
I'm giving the div a background colour of black.

24
00:01:41,130 --> 00:01:45,440
This is black in hexadecimal value padding.

25
00:01:45,460 --> 00:01:53,330
I'm giving it a pad in of 10 pixels padian Physically refers to the space inside the element.

26
00:01:53,640 --> 00:01:54,190
Giving it.

27
00:01:54,200 --> 00:02:01,310
Here we have it in 80 percent of the parents container the parent in a B in the body is going to have

28
00:02:01,410 --> 00:02:06,790
80 percent of that in with a margin to the left.

29
00:02:06,810 --> 00:02:14,310
So basically moving it from the left to which is a side of it and moving it to go towards the right

30
00:02:14,660 --> 00:02:19,740
Great pixels the font family I've specified is held fetich.

31
00:02:20,000 --> 00:02:21,390
We are using font families.

32
00:02:21,390 --> 00:02:24,710
Always good to specify more than one.

33
00:02:24,810 --> 00:02:31,550
Just think is the font you use in is not available on the computer that is being used to view the clock.

34
00:02:31,710 --> 00:02:35,180
And then he can default to on another front.

35
00:02:35,490 --> 00:02:44,110
I got the text aligned a text to the centre and the margin from the top drop in it to 50 pixels so I'm

36
00:02:44,170 --> 00:02:50,280
getting the D to drop down 250 pixels to make it more centred to dippie.

37
00:02:50,550 --> 00:02:54,170
So that's basically bercy assess for the clocks.

38
00:02:54,180 --> 00:03:03,240
I'm just going to save this and just go back to the clock and refresh and you can see now it looks more

39
00:03:03,240 --> 00:03:04,520
presentable.

40
00:03:04,680 --> 00:03:08,940
So that's basically it for this digital clock project.

41
00:03:08,940 --> 00:03:10,200
Thanks for watching.

42
00:03:10,200 --> 00:03:11,370
Bye for now.