1
00:00:00,630 --> 00:00:10,320
Hello and welcome to this lecture in this lecture we are going to create the styling for our quiz using

2
00:00:10,350 --> 00:00:13,690
C S S.

3
00:00:14,100 --> 00:00:16,900
So this is the hasty e-mail for the quiz.

4
00:00:16,950 --> 00:00:27,030
So we're going to use some of the I.D. and classes defined for these safety MLK documents to style the

5
00:00:27,030 --> 00:00:27,900
quiz.

6
00:00:27,900 --> 00:00:31,020
So let me switch to my CSM.

7
00:00:31,020 --> 00:00:34,740
So this is the blanks here says we don't need that.

8
00:00:34,740 --> 00:00:40,060
That was just a label so that time know what file this is.

9
00:00:40,080 --> 00:00:47,910
So this is where I will be creating the styling for the quiz.

10
00:00:47,910 --> 00:00:49,080
The way it's going to work.

11
00:00:49,080 --> 00:00:52,860
So that this lecture doesn't take too much time.

12
00:00:53,550 --> 00:00:58,350
I will rewrite the code add the code and then explain it.

13
00:00:58,350 --> 00:01:01,650
So you're good enough to watch me type all the time.

14
00:01:03,030 --> 00:01:06,040
I have added some code here.

15
00:01:06,090 --> 00:01:09,350
Line 1 basically I'm using the import.

16
00:01:09,390 --> 00:01:17,550
Basically what this is I am going to use the font font called Rocket font family called Rocket and I'm

17
00:01:17,550 --> 00:01:19,270
getting that from Google.

18
00:01:19,320 --> 00:01:19,680
All right.

19
00:01:19,680 --> 00:01:26,730
So that's where I'm saying here get this font from Google so you have to import it before you can use

20
00:01:26,730 --> 00:01:26,850
it.

21
00:01:26,850 --> 00:01:36,210
So that's what I've done in line one line two is the selector that I'm going to be styling so basically

22
00:01:36,350 --> 00:01:43,740
saying the H1 which is the heading these are the styling I am applying to it the font family I'll be

23
00:01:43,740 --> 00:01:46,810
using the rocket from Google.

24
00:01:47,250 --> 00:01:51,480
And I've also got a substitute font called serif.

25
00:01:51,480 --> 00:01:56,370
So if the rocket is not available it will default to the second option.

26
00:01:56,370 --> 00:02:03,510
Always good to specify more than one font when you are declaring a font family property line four is

27
00:02:03,510 --> 00:02:13,600
a text line property where I want the text to be centered land five is a color set and fuse a hex value

28
00:02:13,620 --> 00:02:13,950
there.

29
00:02:13,950 --> 00:02:20,700
Line 6 is basically the size of the font or the text for that.

30
00:02:20,700 --> 00:02:23,660
Page 1 selector.

31
00:02:23,820 --> 00:02:31,890
I have added another chunk of code from line eight to line twenty one line eight.

32
00:02:32,220 --> 00:02:38,840
It's a new l selector which means on ordered list.

33
00:02:38,850 --> 00:02:45,520
So the styling I'm giving it is that I don't want any style that is no bullets nothing.

34
00:02:45,570 --> 00:02:48,740
That's what that means list style property.

35
00:02:48,740 --> 00:02:50,500
I've said that to none.

36
00:02:50,610 --> 00:03:01,230
So there'll be no numbering or no bullets for that on order list items line 11 to 15 is the actual l

37
00:03:01,380 --> 00:03:06,810
I list which is the this you use the airline to list the item.

38
00:03:07,370 --> 00:03:07,770
All right.

39
00:03:07,770 --> 00:03:17,960
So the airline selector specified a font family of rocket and serif font size of 2 m.

40
00:03:17,970 --> 00:03:22,880
You can use M or you can use pixels to color.

41
00:03:22,920 --> 00:03:32,370
I've said that to a hex value line 16 to 20 is the input selector where that type is a radio.

42
00:03:32,370 --> 00:03:37,060
So when you select the questions you need to select which of the radio buttons.

43
00:03:37,110 --> 00:03:41,580
So I've set that to set the properties on this one the border.

44
00:03:41,580 --> 00:03:50,220
I've set it to 0 pixels the width 20 pixels the height again I've used MS here so you can use pixels

45
00:03:50,250 --> 00:03:57,750
if you like but you can if you it depends on which ones you are comfortable with m of pixels you can

46
00:03:57,750 --> 00:03:59,800
use either.

47
00:04:00,510 --> 00:04:11,490
I have had some more styling here from line 23 to 35 so I'll start with line 23 to 25 years so that

48
00:04:11,490 --> 00:04:18,360
the amusing the p selector here the piece selectors were all styling and the styling of applied to his

49
00:04:18,380 --> 00:04:29,130
phone family is going to use rocket and serif will be the substitute front line 26 is a comment that's

50
00:04:29,130 --> 00:04:39,420
how you specify a comment in CSF so that line of code will be ignored because it is a comment line.

51
00:04:39,420 --> 00:04:43,110
Twenty seven is a class.

52
00:04:43,140 --> 00:04:46,260
So this is a class called quiz container.

53
00:04:46,350 --> 00:04:56,490
So the the list and the styling from 28 to 34 given it and background color using the hex value the

54
00:04:56,490 --> 00:05:04,810
border radials property of set to eight pixels border radios is what gives the air like a rounded corner

55
00:05:05,530 --> 00:05:13,390
the width I've sent I've set to seventy five percent so it would be seven typed seventy five percent

56
00:05:13,570 --> 00:05:23,440
of the parent container so whatever container the the queen continues in it will take 75 percent of

57
00:05:23,440 --> 00:05:26,810
the width of that container that's what that means.

58
00:05:27,430 --> 00:05:31,990
Again you could use pixels if you are more comfortable with pixels.

59
00:05:31,990 --> 00:05:41,260
Line 31 is a margin of safety to auto which means it will automatically sent the Queen's container.

60
00:05:41,860 --> 00:05:42,440
OK.

61
00:05:42,460 --> 00:05:45,100
Auto means we will center it on the page.

62
00:05:45,100 --> 00:05:46,560
That's what it means.

63
00:05:46,630 --> 00:05:49,210
Margin from the top that means from the top.

64
00:05:49,210 --> 00:05:53,290
I wanted to move down a hundred and ninety pixels.

65
00:05:53,290 --> 00:06:01,750
The padding margin is the space outside while padding is the space inside the element.

66
00:06:01,780 --> 00:06:07,410
So I've set them to 190 pixels have five pixels respectively.

67
00:06:07,420 --> 00:06:10,900
The position I've set the position to relative

68
00:06:13,700 --> 00:06:28,340
I have had dead so more properties and their values line 38 added a class cord next button so the styling

69
00:06:28,430 --> 00:06:36,950
I have used for the next both in class starkly line 39 which is a border radius.

70
00:06:36,950 --> 00:06:45,300
I've said that 2 6 pixels with one hundred and fifty pixels height 40 pixels text a line I've said it

71
00:06:45,300 --> 00:06:46,260
to center.

72
00:06:46,310 --> 00:06:51,650
I want to put into the center background color offset and use a hex value again.

73
00:06:51,680 --> 00:06:58,270
You can use the color name if you know the color name by head values OK as well.

74
00:06:58,310 --> 00:06:58,760
Here.

75
00:06:58,760 --> 00:07:01,730
Line 44 is just a comment.

76
00:07:01,730 --> 00:07:04,330
So that code will be ignored.

77
00:07:04,380 --> 00:07:10,190
Line 45 is a color which refers to the color of the actual text.

78
00:07:10,290 --> 00:07:12,200
46 is the font family.

79
00:07:12,220 --> 00:07:17,530
Again I'm using rocket and serif 47 font weight.

80
00:07:17,690 --> 00:07:25,130
It refers to half thick well how thick the font would be so I've said that to bold position.

81
00:07:25,130 --> 00:07:31,620
I've said it to a relative margin to auto padding from the top 20 pixels.

82
00:07:33,680 --> 00:07:40,160
OK I can get rid of 44 I was using that for two tests.

83
00:07:40,160 --> 00:07:42,950
If you think so I can get rid of that I don't need that.

84
00:07:42,950 --> 00:07:56,050
Now I have added on another class which is which is called Question Does from line 51 to 6 to 1 so I've

85
00:07:56,060 --> 00:08:02,630
already gone through some of these properties with previous styling on this file so I'm not gonna go

86
00:08:02,630 --> 00:08:05,620
too deep because I'll just be repeating myself.

87
00:08:05,720 --> 00:08:08,950
So a lot of the styling we have used before.

88
00:08:09,440 --> 00:08:13,220
So it's just the same theme height weight and so on.

89
00:08:13,550 --> 00:08:20,740
So I'm not gonna run through that because I've done that with the other class I have added on other

90
00:08:20,930 --> 00:08:27,380
classes chord with message and these are the styling I've given that class.

91
00:08:27,500 --> 00:08:33,140
Again I'm not going to run through it because the same thing like I've done before with the other classes

92
00:08:33,590 --> 00:08:34,920
so basic.

93
00:08:34,980 --> 00:08:38,060
The only difference here here I've not used a hex value.

94
00:08:38,060 --> 00:08:40,130
I've used the actual color name

95
00:08:43,060 --> 00:08:52,210
I have added a couple more classes lines 72 to 75 is the choice list class.

96
00:08:52,210 --> 00:08:57,040
So that's obviously where you make your selection for the quiz answers.

97
00:08:57,040 --> 00:08:58,690
So again similar thing.

98
00:08:58,690 --> 00:09:02,020
The only difference here the font family is slightly different.

99
00:09:02,020 --> 00:09:06,020
I've used courier and serif color.

100
00:09:06,040 --> 00:09:11,730
I've said to blue violet again 77 to 86.

101
00:09:11,750 --> 00:09:22,060
There's another class called result and the values properties of values of specified are self explanatory

102
00:09:22,090 --> 00:09:25,660
is a similar to what we've called through before.

103
00:09:25,660 --> 00:09:29,410
In this I in this lecture for this fall.

104
00:09:29,420 --> 00:09:29,810
Okay.

105
00:09:30,310 --> 00:09:31,400
So again I.

106
00:09:31,600 --> 00:09:39,940
Ideally we'd hide everything we've mentioned before but if there's any part of this lecture you're not

107
00:09:39,940 --> 00:09:42,810
familiar with or if you're not sure by any of this time.

108
00:09:43,750 --> 00:09:48,910
Please feel free to let me know I'll be more than happy to explain further.

109
00:09:49,120 --> 00:09:56,980
So we just save this document and then we can review our page and see what the document looks like after

110
00:09:56,980 --> 00:09:58,700
the styling have been applied.

111
00:10:00,130 --> 00:10:08,260
So this is what the page looks like a moment but when we are doing our javascript series we're going

112
00:10:08,260 --> 00:10:11,970
to use javascript to make it more interactive.

113
00:10:12,550 --> 00:10:14,440
So that's it for this lecture.

114
00:10:14,440 --> 00:10:15,880
Thanks for watching.

115
00:10:15,880 --> 00:10:16,640
Bye for now.