WEBVTT 0 00:02.190 --> 00:10.710 Now in the last lesson we looked at the simplest type of CSS selectors and that is selecting based 1 00:10.710 --> 00:13.200 on the HTML tags. 2 00:13.260 --> 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 00:18.900 --> 00:22.000 more specific changes to your web site. 4 00:22.350 --> 00:26.870 So for example we have this image of a piece of bacon. 5 00:26.880 --> 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 00:33.930 --> 00:35.280 dislike broccoli. 7 00:35.610 --> 00:43.170 Then I could go to emojipedia and I could search for a broccoli and I found my broccoli. 8 00:43.250 --> 00:49.320 And this is a really cool web site because it lists all of the emoji graphics from different operating 9 00:49.320 --> 00:50.070 systems. 10 00:50.070 --> 00:53.420 So this is Apple's version of a broccoli emoji. 11 00:53.640 --> 00:58.390 And this is Google's. This is Microsoft. Not sure that this really looks. 12 00:58.380 --> 01:00.450 This looks more like a tree than a broccoli. 13 01:00.450 --> 01:04.500 But feel free to go through this list and see what emoji you prefer. 14 01:04.500 --> 01:07.120 I quite like this one I think it's most realistic. 15 01:07.260 --> 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 01:13.740 --> 01:14.810 of our image. 17 01:15.000 --> 01:16.460 And you can see up here. 18 01:16.500 --> 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 01:22.920 --> 01:25.150 just in case the image doesn't display. 20 01:25.150 --> 01:30.260 And I'm going to say this is the broccoli-img. 21 01:30.330 --> 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 01:37.530 --> 01:43.590 But the curious thing is that my broccoli also has a red background 23 01:43.590 --> 01:49.380 even though I just put it on screen, I didn’t even have time to look at the styles yet. 24 01:49.410 --> 01:50.900 So why is that. 25 01:51.420 --> 01:58.020 Well if we take a look inside style.css you can see that by targeting the image tag, 26 01:58.200 --> 02:06.150 we’re applying this red background color to every single image inside our web site. 27 02:06.330 --> 02:12.900 And that might be what you want but in most cases that's not really specific enough. 28 02:12.990 --> 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 02:19.800 --> 02:21.670 to say eat more bacon. 30 02:21.970 --> 02:27.110 And the broccoli to have a red background color to say broccoli is evil. 31 02:27.600 --> 02:30.090 So how can I achieve that. 32 02:30.370 --> 02:35.090 Well I can’t do that just by using tag selectors. 33 02:35.220 --> 02:42.690 So I have to go a little bit more advanced in my CSS and I have to use class selectors. 34 02:42.690 --> 02:50.420 So if you head into index.html and after the image tag we're going to add another attribute. 35 02:50.490 --> 02:55.860 So remember HTML attributes are things like the source or the alt tag etc.. 36 02:55.890 --> 03:00.700 And the one that we want to add now is the class attribute. 37 03:00.870 --> 03:08.610 Now the class attribute allows us to differentiate all of our different HTML elements. 38 03:08.610 --> 03:14.530 So for example for this bacon image I'm going to give the class a name of bacon. 39 03:15.010 --> 03:21.000 And for the broccoli image I'm going to name this class broccoli. 40 03:21.000 --> 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 03:29.190 --> 03:30.040 this out. 42 03:30.060 --> 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 03:37.470 --> 03:45.840 a asterisk and then to end the block of comments we use another asterisk and a forward slash. 44 03:46.470 --> 03:53.830 So everything in between the asterisks will be commented out and won't be considered as code. 45 03:54.000 --> 03:57.690 So let's give our css files some sections, shall we? 46 03:57.690 --> 04:03.330 Let's say that the top section are our tag selectors. 47 04:04.140 --> 04:09.480 And the next section are our class selectors. 48 04:09.750 --> 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 04:18.090 --> 04:22.470 the bacon image and give it a background color of green. 50 04:22.470 --> 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 04:32.940 --> 04:34.760 So my class is called bacon. 52 04:34.830 --> 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 04:42.360 --> 04:49.820 And I'm going to say that for the bacon class I want the background color to be green. 54 04:50.830 --> 04:53.380 But for the broccoli class. 55 04:53.380 --> 04:59.260 Now make sure you don't have any typos because if you misspell the selector, the property or the 56 04:59.260 --> 05:02.250 value you might not get what you expect. 57 05:02.260 --> 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 05:08.440 --> 05:09.440 it inside 59 05:09.510 --> 05:13.000 your html code when you gave the class a name. 60 05:13.030 --> 05:18.380 So for our broccoli image we want the background color to be red. 61 05:20.000 --> 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 05:29.240 --> 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 05:35.600 --> 05:39.330 a background color of green as we specified. 64 05:39.330 --> 05:45.020 And because this one has a class of broccoli it's going to have a background color of red. 65 05:45.050 --> 05:47.790 So let's just quickly verify and there we go. 66 05:47.810 --> 05:51.890 We've got our bacon that's colored in green telling you how healthy it is. 67 05:51.950 --> 05:57.250 We've got broccoli colored in red telling you how it's probably not edible. 68 05:57.380 --> 06:06.110 So for things like paragraph elements or image elements or anchor tags then it's very very rare that 69 06:06.110 --> 06:09.580 you'll want to style them exactly the same way. 70 06:09.770 --> 06:18.650 So by using the class as the selector you can better differentiate and and make more specific styling 71 06:18.650 --> 06:21.540 choices for your web site elements.