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 2 00:00:10,710 --> 00:00:13,200 on the HTML tags. 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 4 00:00:18,900 --> 00:00:22,000 more specific changes to your web site. 5 00:00:22,350 --> 00:00:26,870 So for example we have this image of a piece of bacon. 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 7 00:00:33,930 --> 00:00:35,280 dislike broccoli. 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. 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 10 00:00:49,320 --> 00:00:50,070 systems. 11 00:00:50,070 --> 00:00:53,420 So this is Apple's version of a broccoli emoji. 12 00:00:53,640 --> 00:00:58,390 And this is Google's. This is Microsoft. Not sure that this really looks. 13 00:00:58,380 --> 00:01:00,450 This looks more like a tree than a broccoli. 14 00:01:00,450 --> 00:01:04,500 But feel free to go through this list and see what emoji you prefer. 15 00:01:04,500 --> 00:01:07,120 I quite like this one I think it's most realistic. 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 17 00:01:13,740 --> 00:01:14,810 of our image. 18 00:01:15,000 --> 00:01:16,460 And you can see up here. 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 20 00:01:22,920 --> 00:01:25,150 just in case the image doesn't display. 21 00:01:25,150 --> 00:01:30,260 And I'm going to say this is the broccoli-img. 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. 23 00:01:37,530 --> 00:01:43,590 But the curious thing is that my broccoli also has a red background 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. 25 00:01:49,410 --> 00:01:50,900 So why is that. 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, 27 00:01:58,200 --> 00:02:06,150 we’re applying this red background color to every single image inside our web site. 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. 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 30 00:02:19,800 --> 00:02:21,670 to say eat more bacon. 31 00:02:21,970 --> 00:02:27,110 And the broccoli to have a red background color to say broccoli is evil. 32 00:02:27,600 --> 00:02:30,090 So how can I achieve that. 33 00:02:30,370 --> 00:02:35,090 Well I can’t do that just by using tag selectors. 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. 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. 36 00:02:50,490 --> 00:02:55,860 So remember HTML attributes are things like the source or the alt tag etc.. 37 00:02:55,890 --> 00:03:00,700 And the one that we want to add now is the class attribute. 38 00:03:00,870 --> 00:03:08,610 Now the class attribute allows us to differentiate all of our different HTML elements. 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. 40 00:03:15,010 --> 00:03:21,000 And for the broccoli image I'm going to name this class broccoli. 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 42 00:03:29,190 --> 00:03:30,040 this out. 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 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. 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. 46 00:03:54,000 --> 00:03:57,690 So let's give our css files some sections, shall we? 47 00:03:57,690 --> 00:04:03,330 Let's say that the top section are our tag selectors. 48 00:04:04,140 --> 00:04:09,480 And the next section are our class selectors. 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 50 00:04:18,090 --> 00:04:22,470 the bacon image and give it a background color of green. 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. 52 00:04:32,940 --> 00:04:34,760 So my class is called bacon. 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. 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. 55 00:04:50,830 --> 00:04:53,380 But for the broccoli class. 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 57 00:04:59,260 --> 00:05:02,250 value you might not get what you expect. 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 59 00:05:08,440 --> 00:05:09,440 it inside 60 00:05:09,510 --> 00:05:13,000 your html code when you gave the class a name. 61 00:05:13,030 --> 00:05:18,380 So for our broccoli image we want the background color to be red. 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. 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 64 00:05:35,600 --> 00:05:39,330 a background color of green as we specified. 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. 66 00:05:45,050 --> 00:05:47,790 So let's just quickly verify and there we go. 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. 68 00:05:51,950 --> 00:05:57,250 We've got broccoli colored in red telling you how it's probably not edible. 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 70 00:06:06,110 --> 00:06:09,580 you'll want to style them exactly the same way. 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 72 00:06:18,650 --> 00:06:21,540 choices for your web site elements.