WEBVTT 0 00:01.010 --> 00:09.350 Now in the last lesson we looked at how we can use class selectors instead of tag selectors and this 1 00:09.350 --> 00:17.660 gave us way more flexibility and allowed us to specify the styles that we wanted for individual image 2 00:17.660 --> 00:20.830 tags or individual html elements. 3 00:20.840 --> 00:30.730 Now if you're looking at CSS selectors you might also come across the id selector and the id selector 4 00:30.950 --> 00:36.090 is a little bit different from the class selector although they do have some similarities. 5 00:36.320 --> 00:39.980 So let's try an example inside this h1. 6 00:40.010 --> 00:42.720 I'm going to add an id attribute. 7 00:42.890 --> 00:47.890 And this is going to have an id called heading. 8 00:48.260 --> 00:57.590 Now in order to change the style of my heading and target the heading id I have to specify my selector 9 00:57.860 --> 00:59.200 slightly differently. 10 00:59.450 --> 01:07.690 So let's create a new section down here called id selectors and I'll show you how you can select it. 11 01:07.700 --> 01:10.630 So remember our id is called heading. 12 01:10.880 --> 01:19.070 And in order to target it I need to use the hash symbol or some might call it the pound sign and then I'm 13 01:19.070 --> 01:26.170 going to add the name of that id which was called heading and the rest of it is exactly the same. 14 01:26.180 --> 01:28.840 So let's make the color of the heading blue, 15 01:28.940 --> 01:30.330 shall we? 16 01:30.780 --> 01:40.280 Let's hit save and refresh and you can see that even though we've got the h1 still specified as having 17 01:40.310 --> 01:48.300 a red text color, because our id and our class selectors are more specific, 18 01:48.440 --> 01:52.590 this style will override this one. 19 01:52.970 --> 02:01.390 And if you have a look inside the Chrome Developer Tools, selecting the h1 you can see that we've got 20 02:01.390 --> 02:09.710 the h1 color being red but it's crossed out because the id heading is more specific and therefore 21 02:09.800 --> 02:12.720 this is the one that we see on our web site. 22 02:14.280 --> 02:16.770 Now this is the same. 23 02:16.960 --> 02:20.540 Now this is the same for our class selectors. 24 02:20.620 --> 02:23.500 For example let's get rid of these comments 25 02:23.560 --> 02:29.570 to put this back online and we can see that we're saying that all images should have a background color 26 02:29.570 --> 02:34.690 of red but the bacon class should have a background color of green. 27 02:34.690 --> 02:39.720 And if I hit save and I refresh absolutely nothing changes. 28 02:40.000 --> 02:45.610 And that's because if we have a look inside the Chrome Developer Tools and we select our bacon image 29 02:45.790 --> 02:51.890 then you can see that the image tag selector is specifying that the background color should be red. 30 02:52.150 --> 02:57.790 But our bacon class overrides that because it's more specific. 31 02:58.000 --> 03:02.540 And this is saying that it should be green and that is what we see on screen. 32 03:04.450 --> 03:09.610 So that is one similarity between classes and ids. 33 03:09.610 --> 03:14.230 Now people get very very confused about when should you use ids, 34 03:14.260 --> 03:18.560 when should you use classes because they seem like they're kind of similar. 35 03:18.580 --> 03:19.100 Right. 36 03:19.210 --> 03:28.150 Well one of the big differences between the two is that you can only have a single instance of one particular 37 03:28.150 --> 03:31.180 id name inside a single page. 38 03:31.240 --> 03:38.770 So I can't for example go into the paragraph tag and say that this one's id is also called heading and 39 03:38.770 --> 03:43.920 you'll see that Atom gives me this error saying that heading must be unique. 40 03:43.930 --> 03:48.030 I can only use this id in one place. 41 03:48.190 --> 03:51.110 But whereas with class it doesn't really matter. 42 03:51.220 --> 03:53.860 I can say that this class is bacon. 43 03:53.890 --> 03:57.660 I can say this class is bacon, everybody's class is 44 03:57.660 --> 04:00.870 bacon. It doesn't matter at all. 45 04:00.880 --> 04:11.140 So you would use the id to identify elements where there is only a single one of them on a particular 46 04:11.140 --> 04:11.860 page. 47 04:11.920 --> 04:17.860 For example there's probably just going to be one heading or if you had a navigation bar you're probably 48 04:17.980 --> 04:26.200 only going to have one navigation bar on your website but for the class you can use it to group related 49 04:26.200 --> 04:31.200 elements that are all going to behave or have a similar style. 50 04:31.210 --> 04:37.270 For instance if you had a blog and you want to style all the comments on the blog pages then they're 51 04:37.270 --> 04:39.980 probably going to look exactly the same as each other. 52 04:40.000 --> 04:43.720 So they might all have the same class value. 53 04:43.870 --> 04:52.720 So use classes when you want to apply the same style to a group of related items and use the id to apply 54 04:52.780 --> 04:57.450 a specific style to a single element on your web page. 55 04:57.660 --> 05:04.560 And some say the analogy is kind of like name versus passport where anybody can have the same name. 56 05:04.570 --> 05:05.210 Right. 57 05:05.350 --> 05:12.160 Many many Angelas I'm sure across the world but there's only one person with my particular passport 58 05:12.160 --> 05:18.610 number and that uniquely identifies me across all of the other humans in the world. 59 05:18.610 --> 05:26.700 So the similarities are they’re both used to identify HTML elements that you want to style and CSS 60 05:26.700 --> 05:29.100 doesn't actually care what you use. 61 05:29.110 --> 05:34.120 If I said id equals heading here or class equals heading and apply the style, 62 05:34.120 --> 05:35.790 it doesn't actually matter. 63 05:35.920 --> 05:37.950 CSS doesn't care. 64 05:37.960 --> 05:44.890 The other similarity between ids and classes as we mentioned before is that they are more specific than 65 05:44.890 --> 05:52.570 the tag selectors and any of these styles will override any tag selector styles that are applied 66 05:52.570 --> 05:53.930 to the same element. 67 05:54.250 --> 06:01.060 The other thing that you'll notice is that some of these tags have predefined CSS styles that are applied 68 06:01.120 --> 06:02.390 by the browsers. 69 06:02.440 --> 06:09.970 For example the h1, if we have a look inside our Chrome Developer Tools and I select the h1 then you can 70 06:09.970 --> 06:13.150 see that these user agent stylesheets, 71 06:13.150 --> 06:19.370 this comes from the browser and this is applied no matter what CSS style you put down. 72 06:19.480 --> 06:26.710 But if you do specify something using a tag selector inside your css file, for example here for the h1 73 06:26.710 --> 06:33.910 I said that the font size should be 200 pixels and that overrides the default size for the browser and 74 06:33.910 --> 06:37.840 it can be further overridden using ids or classes. 75 06:37.840 --> 06:43.250 Now the differences between ids and classes is what trips up most people. 76 06:43.450 --> 06:50.830 And the first thing to remember is that a particular id can only be used once on this page. 77 06:50.830 --> 06:57.220 So I can only have this heading id once on this page but I can have more than one id so I can say maybe 78 06:57.220 --> 07:06.880 this one’s id is called first-paragraph, but I cannot use this again anywhere else inside the same page. 79 07:06.880 --> 07:15.130 The other difference is that any HTML element can have more than one class but it can only have 80 07:15.220 --> 07:16.960 one id. 81 07:16.960 --> 07:18.940 So what does this mean. 82 07:19.180 --> 07:27.460 Well lets say that I wanted my broccoli image to be circular then we can change the border radius as 83 07:27.460 --> 07:28.660 we did previously. 84 07:28.720 --> 07:38.440 And I can do that by adding another class to my broccoli image called circular and if I go into my style 85 07:38.440 --> 07:49.870 sheet and I target this circular class then I can specify that its border radius should be 100 percent 86 07:49.960 --> 07:52.590 which is going to be circular. 87 07:52.660 --> 08:01.300 So now that circular border radius is going to be applied to this image alongside the styles for the 88 08:01.300 --> 08:02.770 broccoli class. 89 08:02.860 --> 08:10.000 So if we hit save and refresh you'll see that my broccoli image is now circular but my bacon image 90 08:10.030 --> 08:12.460 is left completely alone. 91 08:12.460 --> 08:20.060 And I've implemented this by adding two classes to the same HTML element. 92 08:20.080 --> 08:23.560 Now you can’t do the same thing with id. 93 08:23.650 --> 08:28.320 So let's add another id for example called big. 94 08:28.630 --> 08:31.240 And we tried putting it down here. 95 08:33.640 --> 08:42.210 And let's use it to change the font size to something ridiculous like 1000 pixels. Let's hit save and 96 08:42.210 --> 08:43.140 refresh. 97 08:43.200 --> 08:50.310 You can see that all the styles for that heading id are now removed because this is not a valid id. 98 08:50.310 --> 08:54.320 You can’t have more than one id for a particular element. 99 08:54.390 --> 08:59.130 So that is another difference between classes and ids. 100 08:59.160 --> 09:06.930 Now in practice and when you look at CSS code in the wild you'll see people use classes absolutely everywhere. 101 09:07.140 --> 09:15.480 You'll see tag selectors being used broadly to affect the appearance of HTML elements but you'll see 102 09:15.480 --> 09:26.670 ids used more sparingly and in fact the Linter for CSS on Atom actually suggests against using ids 103 09:27.330 --> 09:30.040 as a selector to change the style. 104 09:30.060 --> 09:36.450 Now I don't really agree with that because I think there are cases where it can be useful but you do 105 09:36.450 --> 09:40.890 have to think very carefully when you do decide to use it. 106 09:40.890 --> 09:47.050 Now the last thing that I want to show you now the last thing I want to show you with regards to CSS 107 09:47.050 --> 09:52.090 selectors is something called a pseudo class. 108 09:52.300 --> 09:59.460 And if we have a look inside the CSS reference amongst all of the different properties and their key 109 09:59.460 --> 10:07.390 words you can see that some of these have a little colon in front of them and these are pseudo classes 110 10:07.990 --> 10:12.520 and this is because HTML elements can have different states. 111 10:12.670 --> 10:20.950 So for example when I hover over a piece of text or an image that's actually a different state and 112 10:21.040 --> 10:29.770 I can get the CSS to change based on the state i.e. hovering over or not hovering over by using these pseudo 113 10:29.770 --> 10:36.640 classes that have a colon in front and the one that you'll see the most often is the hover pseudo class 114 10:37.960 --> 10:39.920 and this is what it looks like. 115 10:40.030 --> 10:48.080 So you can select the hovered state of any HTML element in order to effect its style. 116 10:48.100 --> 10:52.310 So let's go ahead and do that for our image tag. 117 10:52.630 --> 11:01.310 Let's say that when our HTML image elements are hovered or hovered over, or you might know it as 118 11:01.320 --> 11:08.480 rollover or mouseover, but when our images are in this particular state let's say that the background 119 11:08.480 --> 11:12.730 color should be a maybe a gold color. 120 11:12.860 --> 11:17.380 Let's hit save and let's refresh our site and let's check it out. 121 11:17.570 --> 11:26.990 So if I go ahead and hover over my images you can see that it changes the background color to this gold 122 11:27.020 --> 11:32.620 color simply by using that pseudo class of hover. 123 11:32.630 --> 11:39.080 So take a look at some of these properties and different ways of using selectors and use it to mess 124 11:39.080 --> 11:43.150 around with your web site to personalize it even more.