WEBVTT

0
00:18.510 --> 00:19.380
(music)

1
00:19.590 --> 00:20.510
(music)

2
00:20.700 --> 00:21.760
Man, this is fun.

3
00:21.780 --> 00:22.500
This is fun.

4
00:22.500 --> 00:23.400
Welcome back.

5
00:24.300 --> 00:25.260
Oh, man.

6
00:25.410 --> 00:29.340
I don't know why I've got a jersey on - I'm
getting really hot, and I've got a cup of coffee right in front

7
00:29.340 --> 00:29.490
of me.

8
00:29.520 --> 00:30.270
Let me show you.

9
00:30.480 --> 00:31.700
I'm not playing games here.

10
00:31.710 --> 00:32.520
This is for real,

11
00:32.520 --> 00:33.030
for real.

12
00:33.060 --> 00:34.320
Look how good that looks.

13
00:35.200 --> 00:35.670
So, anyway.

14
00:35.670 --> 00:38.370
And of course, you've got to have your little biscuit with your coffee, too.

15
00:39.360 --> 00:39.870
There you go.

16
00:41.940 --> 00:42.450
All right.

17
00:42.460 --> 00:43.440
Hope you're having fun.

18
00:43.470 --> 00:45.030
This is what life is about.

19
00:45.030 --> 00:46.530
We need to enjoy what we do.

20
00:46.830 --> 00:48.720
So what do I want to do in this lecture?

21
00:48.720 --> 00:49.950
What do I want to do right now?

22
00:49.950 --> 00:52.860
Well, as you know, we've been talking about checkable items.

23
00:52.860 --> 00:55.980
And I mentioned that there's this :checked state.

24
00:56.010 --> 00:59.700
In fact, it's a :checked pseudo class.

25
00:59.700 --> 01:05.130
And what that means is that you can't visually really see it in the DOM, but it's there and we're allowed

26
01:05.130 --> 01:13.110
to target it with CSS and style up buttons or checkable buttons depending on that :checked state.

27
01:13.110 --> 01:14.460
So it's really, really useful.

28
01:14.460 --> 01:18.850
It's something you really should know about and I thought, you know, we could move on, but I want

29
01:18.850 --> 01:21.550
to show you how that :checked pseudo class works.

30
01:21.550 --> 01:23.980
So let's code up a very, very simple example.

31
01:25.630 --> 01:26.320
Oh, man.

32
01:28.430 --> 01:29.150
Let's get into it.

33
01:29.510 --> 01:29.990
All right.

34
01:29.990 --> 01:32.060
Let's create an HTML document.

35
01:33.900 --> 01:34.550
Oh, you know what?

36
01:34.560 --> 01:35.780
I actually need to switch this music off.

37
01:35.780 --> 01:37.670
Otherwise, I'm just going to keep going.

38
01:37.670 --> 01:38.750
I'm just going to keep going.

39
01:44.330 --> 01:46.350
All right, let's create an HTML document.

40
01:46.400 --> 01:47.440
Man, I love this stuff.

41
01:47.450 --> 01:53.200
And within HTML, in the head section, we're going to include our CSS styles.

42
01:53.210 --> 01:54.680
For now, let's just leave it blank.

43
01:55.010 --> 01:56.060
Of course we need a body.

44
01:56.060 --> 01:58.400
And in our body, I want to create a form.

45
01:58.400 --> 02:00.830
And, you know, in order to create a form, we use

46
02:00.830 --> 02:01.310
what?

47
02:01.910 --> 02:02.660
That's right,

48
02:02.660 --> 02:04.640
the <form> element.

49
02:04.670 --> 02:06.050
We don't need an action here.

50
02:06.050 --> 02:07.760
We're not submitting this to a server

51
02:08.610 --> 02:09.380
just yet.

52
02:09.390 --> 02:12.270
We'll see an example later in this course. And in this form,

53
02:12.270 --> 02:20.700
I want to create, you guessed it, an input with type checkbox. And its name can just be foo and the

54
02:20.700 --> 02:22.530
ID can just be example.

55
02:22.560 --> 02:23.930
It doesn't really matter here.

56
02:23.940 --> 02:28.710
And then I want to have a label for this checkbox because I'm going to show you how we can target the

57
02:28.710 --> 02:31.020
:checked pseudo class to style that label.

58
02:31.020 --> 02:32.100
It's going to be really cool.

59
02:32.100 --> 02:33.690
So you know how labels work.

60
02:33.720 --> 02:38.210
The "for" has to match the ID of the input we want to link it to.

61
02:38.220 --> 02:45.840
So here we gave the ID of example to the input, and we can just say this is a :checked pseudo class.

62
02:45.840 --> 02:46.800
That's what we're doing.

63
02:47.310 --> 02:53.700
The other thing I want you to know, is that this :checked pseudo class does not apply to all input types.

64
02:53.700 --> 02:56.460
For example, it's not relevant for an input of type text.

65
02:56.460 --> 02:57.780
So let me prove that to you.

66
02:58.290 --> 02:59.790
So let's just have two breaks here.

67
02:59.790 --> 03:00.480
Under here

68
03:00.480 --> 03:03.900
then let's have an input, this time with type text.

69
03:04.020 --> 03:07.140
Its name can be bar, its ID can be example2.

70
03:07.140 --> 03:12.370
Again, I want to label. Its "for" has to match the ID of the input we want to link it to.

71
03:12.370 --> 03:19.990
In this case it's example2. And all I want to say here is "This is a text box". And then I want to just

72
03:19.990 --> 03:32.440
emphasize again that the text box will be ignored because it never receives the :checked state.

73
03:32.470 --> 03:32.800
All right.

74
03:32.800 --> 03:34.240
Well, let's see what this looks like.

75
03:34.240 --> 03:35.320
Let's go to Live Server.

76
03:35.320 --> 03:36.130
Open it up.

77
03:36.490 --> 03:37.300
So here we go.

78
03:37.300 --> 03:38.080
Nothing special.

79
03:38.080 --> 03:42.070
And when we check this checkbox, nothing happens.

80
03:42.070 --> 03:44.920
Can you see that - there's no visual difference.

81
03:44.920 --> 03:49.720
Well, yes, we get, you know, the browser styles that box and there's a tick.

82
03:49.720 --> 03:52.900
But other than that, nothing happens, especially to that label.

83
03:52.900 --> 03:53.380
All right.

84
03:53.380 --> 03:55.240
And obviously it's the same with a text box.

85
03:55.240 --> 03:56.200
Nothing happens.

86
03:56.290 --> 04:00.340
How can we target that :checked pseudo class in order to style this?

87
04:00.340 --> 04:08.260
So when a user toggles a checkable item, he or she is made visually aware that that's happened.

88
04:08.290 --> 04:11.920
It just adds a bit of pizzazz ✨ to your form.

89
04:11.920 --> 04:13.090
So how do we do that?

90
04:13.090 --> 04:16.480
Well, let's go to the coding editor and let's start styling this up.

91
04:16.660 --> 04:17.200
You know what?

92
04:17.200 --> 04:18.850
Let me have it side by side.

93
04:18.850 --> 04:22.540
It's always quite nice and you can see what's going on as we go.

94
04:22.720 --> 04:26.620
The first thing I want to style is our paragraph.

95
04:27.530 --> 04:31.490
Font is a bit big, so let's just put 0.7em.

96
04:31.520 --> 04:32.270
How's that?

97
04:32.450 --> 04:33.170
That's better.

98
04:33.380 --> 04:35.030
And let's change the color.

99
04:35.570 --> 04:37.520
I never like black.

100
04:38.150 --> 04:39.560
(sneeze)

101
04:39.590 --> 04:40.310
Excuse me.

102
04:41.090 --> 04:41.330
Ooh.

103
04:42.140 --> 04:43.370
Another sip of coffee.

104
04:45.020 --> 04:47.040
Mmmmm.

105
04:47.420 --> 04:47.960
That's good.

106
04:48.950 --> 04:49.970
Okay, let's keep going.

107
04:50.000 --> 04:50.780
So that's our paragraph.

108
04:50.780 --> 04:51.350
Done.

109
04:51.410 --> 04:52.730
Now, what do I want to do?

110
04:52.760 --> 04:54.530
Well, I want to target that label.

111
04:54.920 --> 04:56.360
There are many ways to do it.

112
04:57.170 --> 05:05.060
A cool way is we first target our input element, but now we can specify its type in CSS, and we know

113
05:05.060 --> 05:06.980
we want to type of checkbox.

114
05:06.980 --> 05:11.420
We don't have to do this, but I just want to show you the many ways to do something when it comes to

115
05:11.420 --> 05:12.080
coding.

116
05:12.830 --> 05:15.020
So now we've got that input type of checkbox.

117
05:15.020 --> 05:20.180
Then what I want to do is immediately select the next element that is a label.

118
05:20.860 --> 05:21.910
That's what that means.

119
05:22.180 --> 05:25.210
And then we want to style that. Color

120
05:26.140 --> 05:27.460
let's try #ccc.

121
05:27.490 --> 05:28.630
What does that look like?

122
05:30.740 --> 05:31.100
There you go.

123
05:31.100 --> 05:32.510
It's kind of grayed out, right?

124
05:33.140 --> 05:36.170
And then let's have font-style.

125
05:36.170 --> 05:37.400
Let's just make it italic.

126
05:38.780 --> 05:40.040
Yeah, I think it's starting to

127
05:40.040 --> 05:41.660
come on. Now,

128
05:41.660 --> 05:45.910
I want to target this :checked pseudo class and you'll see how easy it is.

129
05:45.920 --> 05:53.180
And we could target the input again with type equals checkbox, for example, and then target the checked

130
05:53.180 --> 05:54.500
pseudo class like this.

131
05:54.500 --> 05:58.910
But remember, I wanted to show you that the pseudo class doesn't apply to other inputs.

132
05:58.910 --> 06:04.460
So actually what I want to do is I want to grab all our inputs right within the page and I want to target

133
06:04.460 --> 06:07.430
their :checked pseudo class.

134
06:07.430 --> 06:08.780
That's what I'm wanting to do.

135
06:08.780 --> 06:13.370
And specifically, again, I'm wanting to style that label.

136
06:13.490 --> 06:15.530
So that's exactly what I'm trying to do here.

137
06:15.530 --> 06:17.450
And how should we style this label when it's checked?

138
06:17.450 --> 06:18.710
Well, you can do whatever you want.

139
06:18.740 --> 06:24.440
This is not a course on CSS, but I want you to understand how you can use it in order to style it according

140
06:24.470 --> 06:25.720
to your needs.

141
06:25.730 --> 06:27.750
So I'm just going to do a quick-and-nasty.

142
06:27.770 --> 06:31.280
And on the topic of quick-and-nasty, let's do hot pink.

143
06:31.280 --> 06:31.970
How's that!

144
06:32.990 --> 06:33.380
All right.

145
06:33.380 --> 06:37.310
And I'll even prove it to you. If I now toggle this checkable item,

146
06:37.310 --> 06:38.340
what's going to happen?

147
06:38.340 --> 06:40.170
Well, how cool is that?

148
06:40.170 --> 06:44.970
You can already see we targeting the :checked pseudo class.

149
06:45.090 --> 06:46.080
Wow.

150
06:46.080 --> 06:46.680
Come on.

151
06:46.800 --> 06:47.640
It's that easy.

152
06:47.640 --> 06:48.510
It's that easy.

153
06:48.510 --> 06:52.740
I'll just apply a few more stylings just so you can get a few ideas.

154
06:52.740 --> 06:54.950
You know, we set above the font-style of italic.

155
06:54.960 --> 06:57.840
Well, why don't we set the font-style now just to normal?

156
06:57.930 --> 06:59.970
You know, we'll revert back to normal.

157
06:59.970 --> 07:02.850
We can set a box-shadow property here.

158
07:02.940 --> 07:06.330
1px 1px 4px 1px. 

159
07:06.360 --> 07:07.020
What color?

160
07:07.020 --> 07:09.720
Well, we are on the topic of hot pink, aren't we?

161
07:10.170 --> 07:11.400
So there is our box-shadow.

162
07:11.430 --> 07:12.570
What else can we put?

163
07:12.720 --> 07:14.340
Maybe we want some padding.

164
07:15.180 --> 07:17.430
Just a bit of padding, who knows.

165
07:18.090 --> 07:19.230
And let's see what this looks like.

166
07:19.230 --> 07:21.090
So I'm going to check it right now.

167
07:22.560 --> 07:25.200
You see, it is so, so intuitive.

168
07:25.200 --> 07:26.550
It's so, so much fun.

169
07:26.850 --> 07:30.060
And these are just a few ideas, really.

170
07:30.060 --> 07:37.650
What I wanted to prove to you here is that, (a) it is super easy to target that :checked pseudo class.

171
07:37.650 --> 07:41.910
And secondly (b) I wanted you to know that nothing's happening to this text box.

172
07:41.910 --> 07:43.680
We can still type Wally here.

173
07:43.920 --> 07:44.910
Nothing happens.

174
07:44.910 --> 07:46.410
It doesn't get that checked

175
07:46.410 --> 07:48.120
state - it's not a button, right?

176
07:48.120 --> 07:51.540
It's not a checkable item, so it makes intuitive sense.

177
07:51.540 --> 07:55.740
It only applies to checkable items - radio buttons and checkboxes.

178
07:55.770 --> 07:56.580
Got it.

179
07:57.870 --> 07:59.220
Well, then what are we waiting for?

180
07:59.250 --> 08:00.510
Let's move on to the next lecture.

181
08:00.510 --> 08:01.560
Hope you're having fun.

182
08:01.560 --> 08:03.210
Hope you're staying motivated.

183
08:03.990 --> 08:04.620
Adios.
(background music plays)