0
1
00:00:02,190 --> 00:00:10,710
Now in the last lesson we looked at the simplest type of CSS selectors and that is selecting based
1

2
00:00:10,710 --> 00:00:13,200
on the HTML tags.
2

3
00:00:13,260 --> 00:00:18,900
Now in this lesson I want to show you the other things that you can use as selectors in order to make
3

4
00:00:18,900 --> 00:00:22,000
more specific changes to your web site. 
4

5
00:00:22,350 --> 00:00:26,870
So for example we have this image of a piece of bacon.
5

6
00:00:26,880 --> 00:00:33,930
Now what if I wanted to have another image that was a broccoli and I want to show people how much I
6

7
00:00:33,930 --> 00:00:35,280
dislike broccoli.
7

8
00:00:35,610 --> 00:00:43,170
Then I could go to emojipedia and I could search for a broccoli and I found my broccoli.
8

9
00:00:43,250 --> 00:00:49,320
And this is a really cool web site because it lists all of the emoji graphics from different operating
9

10
00:00:49,320 --> 00:00:50,070
systems.
10

11
00:00:50,070 --> 00:00:53,420
So this is Apple's version of a broccoli emoji.
11

12
00:00:53,640 --> 00:00:58,390
And this is Google's. This is Microsoft. Not sure that this really looks.
12

13
00:00:58,380 --> 00:01:00,450
This looks more like a tree than a broccoli.
13

14
00:01:00,450 --> 00:01:04,500
But feel free to go through this list and see what emoji you prefer.
14

15
00:01:04,500 --> 00:01:07,120
I quite like this one I think it's most realistic.
15

16
00:01:07,260 --> 00:01:13,650
And then just go ahead and right click and copy the image address and we're going to use that as the source
16

17
00:01:13,740 --> 00:01:14,810
of our image.
17

18
00:01:15,000 --> 00:01:16,460
And you can see up here.
18

19
00:01:16,500 --> 00:01:22,800
This is exactly the same way how I got the image for our bacon and I'm just going to add an alt text
19

20
00:01:22,920 --> 00:01:25,150
just in case the image doesn't display.
20

21
00:01:25,150 --> 00:01:30,260
And I'm going to say this is the broccoli-img.
21

22
00:01:30,330 --> 00:01:37,400
So now if I hit save and I go to my bacon fansite you can see that my broccoli now shows up.
22

23
00:01:37,530 --> 00:01:43,590
But the curious thing is that my broccoli also has a red background
23

24
00:01:43,590 --> 00:01:49,380
even though I just put it on screen, I didn’t even have time to look at the styles yet.
24

25
00:01:49,410 --> 00:01:50,900
So why is that.
25

26
00:01:51,420 --> 00:01:58,020
Well if we take a look inside style.css you can see that by targeting the image tag,
26

27
00:01:58,200 --> 00:02:06,150
we’re applying this red background color to every single image inside our web site.
27

28
00:02:06,330 --> 00:02:12,900
And that might be what you want but in most cases that's not really specific enough.
28

29
00:02:12,990 --> 00:02:19,770
And in my case what I'd like to do is that I want to have the bacon to have a green background color
29

30
00:02:19,800 --> 00:02:21,670
to say eat more bacon.
30

31
00:02:21,970 --> 00:02:27,110
And the broccoli to have a red background color to say broccoli is evil.
31

32
00:02:27,600 --> 00:02:30,090
So how can I achieve that.
32

33
00:02:30,370 --> 00:02:35,090
Well I can’t do that just by using tag selectors.
33

34
00:02:35,220 --> 00:02:42,690
So I have to go a little bit more advanced in my CSS and I have to use class selectors.
34

35
00:02:42,690 --> 00:02:50,420
So if you head into index.html and after the image tag we're going to add another attribute.
35

36
00:02:50,490 --> 00:02:55,860
So remember HTML attributes are things like the source or the alt tag etc..
36

37
00:02:55,890 --> 00:03:00,700
And the one that we want to add now is the class attribute.
37

38
00:03:00,870 --> 00:03:08,610
Now the class attribute allows us to differentiate all of our different HTML elements.
38

39
00:03:08,610 --> 00:03:14,530
So for example for this bacon image I'm going to give the class a name of bacon.
39

40
00:03:15,010 --> 00:03:21,000
And for the broccoli image I'm going to name this class broccoli.
40

41
00:03:21,000 --> 00:03:29,190
So now what I can do is instead of coloring all the images red so I'm going to go ahead and comment
41

42
00:03:29,190 --> 00:03:30,040
this out.
42

43
00:03:30,060 --> 00:03:36,960
So in CSS commenting is a little bit different from HTML in the sense that we have to use a forward slash
43

44
00:03:37,470 --> 00:03:45,840
a asterisk and then to end the block of comments we use another asterisk and a forward slash.
44

45
00:03:46,470 --> 00:03:53,830
So everything in between the asterisks will be commented out and won't be considered as code.
45

46
00:03:54,000 --> 00:03:57,690
So let's give our css files some sections, shall we?
46

47
00:03:57,690 --> 00:04:03,330
Let's say that the top section are our tag selectors.
47

48
00:04:04,140 --> 00:04:09,480
And the next section are our class selectors.
48

49
00:04:09,750 --> 00:04:18,090
So inside this section I'm going to tap into that bacon class in order to only change the styling for
49

50
00:04:18,090 --> 00:04:22,470
the bacon image and give it a background color of green.
50

51
00:04:22,470 --> 00:04:32,910
So to target a class rather than a tag the only difference is a full stop or a dot in front of the class.
51

52
00:04:32,940 --> 00:04:34,760
So my class is called bacon.
52

53
00:04:34,830 --> 00:04:41,900
So to use it as a selector I just say .bacon and the rest of the CSS rule looks exactly the same.
53

54
00:04:42,360 --> 00:04:49,820
And I'm going to say that for the bacon class I want the background color to be green.
54

55
00:04:50,830 --> 00:04:53,380
But for the broccoli class.
55

56
00:04:53,380 --> 00:04:59,260
Now make sure you don't have any typos because if you misspell the selector, the property or the
56

57
00:04:59,260 --> 00:05:02,250
value you might not get what you expect.
57

58
00:05:02,260 --> 00:05:08,440
For example what I've done here because they all need to be spelt exactly the same way as you spelt
58

59
00:05:08,440 --> 00:05:09,440
it inside
59

60
00:05:09,510 --> 00:05:13,000
your html code when you gave the class a name.
60

61
00:05:13,030 --> 00:05:18,380
So for our broccoli image we want the background color to be red.
61

62
00:05:20,000 --> 00:05:29,230
So now if we hit save then what's going to happen is that different styles will be applied to our two images.
62

63
00:05:29,240 --> 00:05:35,570
So even though they’re both image html elements, because this one has a class of bacon it's going to have
63

64
00:05:35,600 --> 00:05:39,330
a background color of green as we specified.
64

65
00:05:39,330 --> 00:05:45,020
And because this one has a class of broccoli it's going to have a background color of red.
65

66
00:05:45,050 --> 00:05:47,790
So let's just quickly verify and there we go.
66

67
00:05:47,810 --> 00:05:51,890
We've got our bacon that's colored in green telling you how healthy it is.
67

68
00:05:51,950 --> 00:05:57,250
We've got broccoli colored in red telling you how it's probably not edible.
68

69
00:05:57,380 --> 00:06:06,110
So for things like paragraph elements or image elements or anchor tags then it's very very rare that
69

70
00:06:06,110 --> 00:06:09,580
you'll want to style them exactly the same way.
70

71
00:06:09,770 --> 00:06:18,650
So by using the class as the selector you can better differentiate and and make more specific styling
71

72
00:06:18,650 --> 00:06:21,540
choices for your web site elements.