0 1 00:00:01,010 --> 00:00:09,350 Now in the last lesson we looked at how we can use class selectors instead of tag selectors and this 1 2 00:00:09,350 --> 00:00:17,660 gave us way more flexibility and allowed us to specify the styles that we wanted for individual image 2 3 00:00:17,660 --> 00:00:20,830 tags or individual html elements. 3 4 00:00:20,840 --> 00:00:30,730 Now if you're looking at CSS selectors you might also come across the id selector and the id selector 4 5 00:00:30,950 --> 00:00:36,090 is a little bit different from the class selector although they do have some similarities. 5 6 00:00:36,320 --> 00:00:39,980 So let's try an example inside this h1. 6 7 00:00:40,010 --> 00:00:42,720 I'm going to add an id attribute. 7 8 00:00:42,890 --> 00:00:47,890 And this is going to have an id called heading. 8 9 00:00:48,260 --> 00: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 10 00:00:57,860 --> 00:00:59,200 slightly differently. 10 11 00:00:59,450 --> 00: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 12 00:01:07,700 --> 00:01:10,630 So remember our id is called heading. 12 13 00:01:10,880 --> 00: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 14 00:01:19,070 --> 00: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 15 00:01:26,180 --> 00:01:28,840 So let's make the color of the heading blue, 15 16 00:01:28,940 --> 00:01:30,330 shall we? 16 17 00:01:30,780 --> 00: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 18 00:01:40,310 --> 00:01:48,300 a red text color, because our id and our class selectors are more specific, 18 19 00:01:48,440 --> 00:01:52,590 this style will override this one. 19 20 00:01:52,970 --> 00: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 21 00:02:01,390 --> 00:02:09,710 the h1 color being red but it's crossed out because the id heading is more specific and therefore 21 22 00:02:09,800 --> 00:02:12,720 this is the one that we see on our web site. 22 23 00:02:14,280 --> 00:02:16,770 Now this is the same. 23 24 00:02:16,960 --> 00:02:20,540 Now this is the same for our class selectors. 24 25 00:02:20,620 --> 00:02:23,500 For example let's get rid of these comments 25 26 00:02:23,560 --> 00: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 27 00:02:29,570 --> 00:02:34,690 of red but the bacon class should have a background color of green. 27 28 00:02:34,690 --> 00:02:39,720 And if I hit save and I refresh absolutely nothing changes. 28 29 00:02:40,000 --> 00:02:45,610 And that's because if we have a look inside the Chrome Developer Tools and we select our bacon image 29 30 00:02:45,790 --> 00:02:51,890 then you can see that the image tag selector is specifying that the background color should be red. 30 31 00:02:52,150 --> 00:02:57,790 But our bacon class overrides that because it's more specific. 31 32 00:02:58,000 --> 00:03:02,540 And this is saying that it should be green and that is what we see on screen. 32 33 00:03:04,450 --> 00:03:09,610 So that is one similarity between classes and ids. 33 34 00:03:09,610 --> 00:03:14,230 Now people get very very confused about when should you use ids, 34 35 00:03:14,260 --> 00:03:18,560 when should you use classes because they seem like they're kind of similar. 35 36 00:03:18,580 --> 00:03:19,100 Right. 36 37 00:03:19,210 --> 00: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 38 00:03:28,150 --> 00:03:31,180 id name inside a single page. 38 39 00:03:31,240 --> 00: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 40 00:03:38,770 --> 00:03:43,920 you'll see that Atom gives me this error saying that heading must be unique. 40 41 00:03:43,930 --> 00:03:48,030 I can only use this id in one place. 41 42 00:03:48,190 --> 00:03:51,110 But whereas with class it doesn't really matter. 42 43 00:03:51,220 --> 00:03:53,860 I can say that this class is bacon. 43 44 00:03:53,890 --> 00:03:57,660 I can say this class is bacon, everybody's class is 44 45 00:03:57,660 --> 00:04:00,870 bacon. It doesn't matter at all. 45 46 00:04:00,880 --> 00: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 47 00:04:11,140 --> 00:04:11,860 page. 47 48 00:04:11,920 --> 00: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 49 00:04:17,980 --> 00: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 50 00:04:26,200 --> 00:04:31,200 elements that are all going to behave or have a similar style. 50 51 00:04:31,210 --> 00: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 52 00:04:37,270 --> 00:04:39,980 probably going to look exactly the same as each other. 52 53 00:04:40,000 --> 00:04:43,720 So they might all have the same class value. 53 54 00:04:43,870 --> 00: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 55 00:04:52,780 --> 00:04:57,450 a specific style to a single element on your web page. 55 56 00:04:57,660 --> 00:05:04,560 And some say the analogy is kind of like name versus passport where anybody can have the same name. 56 57 00:05:04,570 --> 00:05:05,210 Right. 57 58 00:05:05,350 --> 00:05:12,160 Many many Angelas I'm sure across the world but there's only one person with my particular passport 58 59 00:05:12,160 --> 00:05:18,610 number and that uniquely identifies me across all of the other humans in the world. 59 60 00:05:18,610 --> 00:05:26,700 So the similarities are they’re both used to identify HTML elements that you want to style and CSS 60 61 00:05:26,700 --> 00:05:29,100 doesn't actually care what you use. 61 62 00:05:29,110 --> 00:05:34,120 If I said id equals heading here or class equals heading and apply the style, 62 63 00:05:34,120 --> 00:05:35,790 it doesn't actually matter. 63 64 00:05:35,920 --> 00:05:37,950 CSS doesn't care. 64 65 00:05:37,960 --> 00:05:44,890 The other similarity between ids and classes as we mentioned before is that they are more specific than 65 66 00:05:44,890 --> 00:05:52,570 the tag selectors and any of these styles will override any tag selector styles that are applied 66 67 00:05:52,570 --> 00:05:53,930 to the same element. 67 68 00:05:54,250 --> 00:06:01,060 The other thing that you'll notice is that some of these tags have predefined CSS styles that are applied 68 69 00:06:01,120 --> 00:06:02,390 by the browsers. 69 70 00:06:02,440 --> 00: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 71 00:06:09,970 --> 00:06:13,150 see that these user agent stylesheets, 71 72 00:06:13,150 --> 00:06:19,370 this comes from the browser and this is applied no matter what CSS style you put down. 72 73 00:06:19,480 --> 00:06:26,710 But if you do specify something using a tag selector inside your css file, for example here for the h1 73 74 00:06:26,710 --> 00:06:33,910 I said that the font size should be 200 pixels and that overrides the default size for the browser and 74 75 00:06:33,910 --> 00:06:37,840 it can be further overridden using ids or classes. 75 76 00:06:37,840 --> 00:06:43,250 Now the differences between ids and classes is what trips up most people. 76 77 00:06:43,450 --> 00:06:50,830 And the first thing to remember is that a particular id can only be used once on this page. 77 78 00:06:50,830 --> 00: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 79 00:06:57,220 --> 00:07:06,880 this one’s id is called first-paragraph, but I cannot use this again anywhere else inside the same page. 79 80 00:07:06,880 --> 00:07:15,130 The other difference is that any HTML element can have more than one class but it can only have 80 81 00:07:15,220 --> 00:07:16,960 one id. 81 82 00:07:16,960 --> 00:07:18,940 So what does this mean. 82 83 00:07:19,180 --> 00:07:27,460 Well lets say that I wanted my broccoli image to be circular then we can change the border radius as 83 84 00:07:27,460 --> 00:07:28,660 we did previously. 84 85 00:07:28,720 --> 00: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 86 00:07:38,440 --> 00:07:49,870 sheet and I target this circular class then I can specify that its border radius should be 100 percent 86 87 00:07:49,960 --> 00:07:52,590 which is going to be circular. 87 88 00:07:52,660 --> 00:08:01,300 So now that circular border radius is going to be applied to this image alongside the styles for the 88 89 00:08:01,300 --> 00:08:02,770 broccoli class. 89 90 00:08:02,860 --> 00: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 91 00:08:10,030 --> 00:08:12,460 is left completely alone. 91 92 00:08:12,460 --> 00:08:20,060 And I've implemented this by adding two classes to the same HTML element. 92 93 00:08:20,080 --> 00:08:23,560 Now you can’t do the same thing with id. 93 94 00:08:23,650 --> 00:08:28,320 So let's add another id for example called big. 94 95 00:08:28,630 --> 00:08:31,240 And we tried putting it down here. 95 96 00:08:33,640 --> 00: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 97 00:08:42,210 --> 00:08:43,140 refresh. 97 98 00:08:43,200 --> 00: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 99 00:08:50,310 --> 00:08:54,320 You can’t have more than one id for a particular element. 99 100 00:08:54,390 --> 00:08:59,130 So that is another difference between classes and ids. 100 101 00:08:59,160 --> 00: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 102 00:09:07,140 --> 00:09:15,480 You'll see tag selectors being used broadly to affect the appearance of HTML elements but you'll see 102 103 00:09:15,480 --> 00:09:26,670 ids used more sparingly and in fact the Linter for CSS on Atom actually suggests against using ids 103 104 00:09:27,330 --> 00:09:30,040 as a selector to change the style. 104 105 00:09:30,060 --> 00: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 106 00:09:36,450 --> 00:09:40,890 have to think very carefully when you do decide to use it. 106 107 00:09:40,890 --> 00: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 108 00:09:47,050 --> 00:09:52,090 selectors is something called a pseudo class. 108 109 00:09:52,300 --> 00:09:59,460 And if we have a look inside the CSS reference amongst all of the different properties and their key 109 110 00:09:59,460 --> 00: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 111 00:10:07,990 --> 00:10:12,520 and this is because HTML elements can have different states. 111 112 00:10:12,670 --> 00: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 113 00:10:21,040 --> 00: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 114 00:10:29,770 --> 00: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 115 00:10:37,960 --> 00:10:39,920 and this is what it looks like. 115 116 00:10:40,030 --> 00:10:48,080 So you can select the hovered state of any HTML element in order to effect its style. 116 117 00:10:48,100 --> 00:10:52,310 So let's go ahead and do that for our image tag. 117 118 00:10:52,630 --> 00:11:01,310 Let's say that when our HTML image elements are hovered or hovered over, or you might know it as 118 119 00:11:01,320 --> 00:11:08,480 rollover or mouseover, but when our images are in this particular state let's say that the background 119 120 00:11:08,480 --> 00:11:12,730 color should be a maybe a gold color. 120 121 00:11:12,860 --> 00:11:17,380 Let's hit save and let's refresh our site and let's check it out. 121 122 00:11:17,570 --> 00: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 123 00:11:27,020 --> 00:11:32,620 color simply by using that pseudo class of hover. 123 124 00:11:32,630 --> 00:11:39,080 So take a look at some of these properties and different ways of using selectors and use it to mess 124 125 00:11:39,080 --> 00:11:43,150 around with your web site to personalize it even more.