1
00:00:00,510 --> 00:00:09,420
Hello and welcome in this lecture, we are going to be styling our hate HTML that we created for our

2
00:00:09,420 --> 00:00:09,780
app.

3
00:00:11,550 --> 00:00:15,770
So I'm inside my text editor on this is the scissors file.

4
00:00:15,780 --> 00:00:21,000
So this is where we're going to define the styling for our app.

5
00:00:21,360 --> 00:00:25,980
So we're going to use the IDs where we've got IDs to use.

6
00:00:26,250 --> 00:00:31,710
If not, we'll use the actual elements to style the HTML.

7
00:00:33,090 --> 00:00:41,190
I have added some basic styling here for the body of the actual email, so this style would be applied

8
00:00:41,190 --> 00:00:41,880
to the body.

9
00:00:42,270 --> 00:00:44,970
When you're styling, you need to have a selector.

10
00:00:45,240 --> 00:00:47,190
In this case, the body is a selector.

11
00:00:47,580 --> 00:00:55,170
And then in between the curly braces, this one and this one, here you specify the properties and the

12
00:00:55,170 --> 00:00:58,440
value you want to apply to the selector.

13
00:00:58,830 --> 00:01:06,120
So in this case, I have got several properties here, and the text alone is a property and I want the

14
00:01:06,120 --> 00:01:14,220
text to be centered on a property called background color, and I'm giving it a hex value background

15
00:01:14,220 --> 00:01:14,580
color.

16
00:01:14,940 --> 00:01:20,220
If you don't have to use hex value, for example, if you know the actual color name, you could specify

17
00:01:20,220 --> 00:01:22,950
that in place of the hex value.

18
00:01:23,550 --> 00:01:25,980
Here again, the color I specify white.

19
00:01:25,980 --> 00:01:34,500
This color here refers to the color of the text you use for the body, not the actual, not the actual

20
00:01:35,070 --> 00:01:35,730
background.

21
00:01:36,060 --> 00:01:36,540
OK.

22
00:01:36,750 --> 00:01:43,380
If you want the background color, you need to specify background color font family refers to the font,

23
00:01:43,800 --> 00:01:45,610
the type of font that you can use.

24
00:01:45,640 --> 00:01:48,690
It's always good to specify more than one.

25
00:01:49,140 --> 00:01:59,850
So I'll just add area just in case the first font is not available on the machine that is viewing this

26
00:01:59,850 --> 00:02:02,930
page so it can default to the other one.

27
00:02:02,940 --> 00:02:05,990
So what I'm saying here, this is my first choice here.

28
00:02:06,030 --> 00:02:08,480
That font is now available default to that.

29
00:02:08,490 --> 00:02:12,240
So most computers should have either both or either.

30
00:02:14,340 --> 00:02:23,070
I did a chunk more of styling from Line eight here to Line 18 notes here I've used the ID attribute.

31
00:02:23,070 --> 00:02:27,630
This idea here is derived from this idea.

32
00:02:28,290 --> 00:02:33,090
Inside here we've got an ID here called Add.

33
00:02:33,310 --> 00:02:36,030
That's the idea I am referring to here.

34
00:02:36,480 --> 00:02:36,960
All right.

35
00:02:36,960 --> 00:02:38,100
So that's the target.

36
00:02:38,460 --> 00:02:41,970
And these are the properties and these are the values.

37
00:02:41,970 --> 00:02:45,150
So you separate the property from the value with a colon.

38
00:02:45,660 --> 00:02:46,220
OK.

39
00:02:46,260 --> 00:02:49,050
So again, this is the ID I'm signing.

40
00:02:49,530 --> 00:02:57,270
The background color I've given it read both are set to zero I don't want, but our color is white,

41
00:02:57,270 --> 00:03:02,760
which is a color of its referring to color of the text padding.

42
00:03:02,970 --> 00:03:09,510
OK, padding is the space inside the element, while margin is a space outside it.

43
00:03:09,510 --> 00:03:13,490
So these are the values are specified for the padding cursor.

44
00:03:13,530 --> 00:03:21,960
The cursor property basically specifies the type of cursor to be displayed when pointing on an element.

45
00:03:22,380 --> 00:03:23,270
That's what that is.

46
00:03:23,280 --> 00:03:30,210
I've just said pointer margin again refers to this space outside what I'm seeing here from the top.

47
00:03:30,660 --> 00:03:31,890
I want, I want.

48
00:03:32,190 --> 00:03:36,720
You want there to be a space thirty five pixels from the top.

49
00:03:36,750 --> 00:03:37,890
That's what that means.

50
00:03:40,440 --> 00:03:49,200
I have added some more styling from line 19 to 25, and this time I am styling a class, so if you got

51
00:03:49,200 --> 00:03:53,680
a dot followed by a name that is the class, so I'm styling that class.

52
00:03:53,700 --> 00:03:59,580
This class will be added automatically with our JavaScript bomb.

53
00:03:59,580 --> 00:04:02,790
I'm just preparing this styling for that beforehand.

54
00:04:04,350 --> 00:04:07,630
So again, the class here is the select.

55
00:04:08,340 --> 00:04:13,770
We've got the property margin, I'm saying from the top one to drop 13 pixels.

56
00:04:14,160 --> 00:04:15,090
Background color.

57
00:04:15,090 --> 00:04:20,010
I've said that two x color x value float means float.

58
00:04:20,010 --> 00:04:24,660
Basically, if you've got it means I want the element to move to the right.

59
00:04:25,050 --> 00:04:25,550
OK.

60
00:04:26,070 --> 00:04:30,310
Where you have elements moving to the right, you need to also specify a clear.

61
00:04:30,330 --> 00:04:32,460
So when you use float, you need to use Clare.

62
00:04:32,880 --> 00:04:41,430
Clare basically is used to clear any obstruction on either side and then the background color.

63
00:04:42,030 --> 00:04:43,260
So we've got padding.

64
00:04:43,260 --> 00:04:49,980
Padding refers to the space inside, so I'm saying the space inside from the right, I wanted to move

65
00:04:49,980 --> 00:04:50,940
20 pixels.

66
00:04:51,360 --> 00:04:54,490
Body radius is what gives the around it corner.

67
00:04:54,510 --> 00:04:58,590
So if you've got a square, the border radius kind of like makes it around a bit.

68
00:04:59,040 --> 00:05:01,620
So that's why the border radius property does.

69
00:05:03,180 --> 00:05:03,460
All right.

70
00:05:03,680 --> 00:05:07,350
I followed a couple of more properties to this class here.

71
00:05:08,190 --> 00:05:17,550
Give it a whiff of 60 pixels and a height of 20 pixels, both as tall as 32 none so that there are no

72
00:05:17,550 --> 00:05:19,650
shadows or nothin on the borders.

73
00:05:21,750 --> 00:05:29,700
I've added some more styling to this I.D. called wrapper, which if we go into our HTML here, we'll

74
00:05:29,700 --> 00:05:36,120
see that we've got an I.D. here code wrapper, which is the main div does that you want?

75
00:05:36,120 --> 00:05:37,470
I'm targeting here.

76
00:05:38,190 --> 00:05:41,280
These are the styling of applied to that ID.

77
00:05:42,120 --> 00:05:47,160
Again, the width of, say, the width of 450 pixels, a background color.

78
00:05:47,310 --> 00:05:49,170
I've given it a hex value.

79
00:05:49,890 --> 00:05:53,190
The margin of set it margin from the top.

80
00:05:53,610 --> 00:05:58,660
I've said I want it to drop a hundred and twenty pixels margin from the left.

81
00:05:58,680 --> 00:06:04,590
I wanted to move to two nine five pixels padding from the bottom.

82
00:06:04,800 --> 00:06:11,100
Remember, padding is a space inside the element, while margin is a space outside the element.

83
00:06:11,610 --> 00:06:22,350
So padding from the bottom 30 pixels padding left 50 pixels padding top 30 right 65 body radius 25 pixels

84
00:06:22,800 --> 00:06:24,210
by all means play around.

85
00:06:24,210 --> 00:06:24,990
With these values.

86
00:06:24,990 --> 00:06:31,740
You don't necessarily have to stick to my values, just play around and experiment and see what works

87
00:06:31,740 --> 00:06:32,280
for you.

88
00:06:34,050 --> 00:06:42,000
I've added a chunk more of styling from line 43 to 57, so forth.

89
00:06:42,120 --> 00:06:44,760
I'll explain 43 to 48 first.

90
00:06:45,360 --> 00:06:54,310
That is the UL, which is the on ordered list which I will insert using the using JavaScript.

91
00:06:54,330 --> 00:06:58,320
Basically, these are the styling, the lists, all I want.

92
00:06:58,320 --> 00:07:05,400
I don't want it to have any styling on the list and I've said that text aligned to the left line height

93
00:07:05,400 --> 00:07:08,040
is the space between each text.

94
00:07:08,850 --> 00:07:09,360
OK.

95
00:07:09,390 --> 00:07:12,930
And then 949 the ID code task.

96
00:07:13,080 --> 00:07:20,370
So that's where we will actually input the the task we want to carry out.

97
00:07:22,690 --> 00:07:32,170
So the task, Heidi, here on Line 49, giving a width of 320 pixels, a height of 30 pixels, the margin

98
00:07:32,170 --> 00:07:41,890
from the left of Tony to move 17 pixels and line 54 is the H1 tag, which I've given a margin from the

99
00:07:41,890 --> 00:07:42,310
top.

100
00:07:42,730 --> 00:07:47,590
I said I wanted to move 30 pixels from the top.

101
00:07:47,950 --> 00:07:48,970
That's what that means.

102
00:07:49,960 --> 00:07:52,900
OK, so that's all our styling done.

103
00:07:52,910 --> 00:07:59,860
I just save that and we can try and view our app and see what it looks like.

104
00:08:00,640 --> 00:08:01,030
All right.

105
00:08:01,040 --> 00:08:03,580
So this is what the app looks like before the styling.

106
00:08:03,580 --> 00:08:05,080
So I'll just refresh.

107
00:08:05,710 --> 00:08:08,860
And this is what it looks like now after the styling.

108
00:08:08,860 --> 00:08:14,350
So it looks much nicer, more presentable with the styling.

109
00:08:14,770 --> 00:08:25,240
So that's it for the styling, for this project in the next lecture, or be doing the actual JavaScript

110
00:08:25,240 --> 00:08:29,050
writing JavaScript code that will make all this work.

111
00:08:29,620 --> 00:08:30,910
Thanks for watching.

112
00:08:31,120 --> 00:08:31,750
Bye for that.