1 00:00:02,380 --> 00:00:05,200 Now that we learned more about CSS class selectors, 2 00:00:05,290 --> 00:00:11,850 there also is some obvious question you could have. You get CSS class selectors and CSS ID 3 00:00:11,850 --> 00:00:19,960 selectors, of course you also got tags and so on but there are cases where you would just use a class selector 4 00:00:19,960 --> 00:00:20,680 once, 5 00:00:20,830 --> 00:00:24,070 should you then use it or should you use an ID selector instead, 6 00:00:24,070 --> 00:00:26,910 when should you use which kind of selector? 7 00:00:27,400 --> 00:00:32,350 Well, let's see the basics real quick. A class selector is defined like this, an ID selector like this, 8 00:00:32,350 --> 00:00:33,700 with the hash symbol 9 00:00:34,120 --> 00:00:41,530 and if we add some HTML code, this class selector would select these two HTML elements on the left, 10 00:00:41,620 --> 00:00:46,530 the ID selector would only select the first HTML element in the snippet on the right, 11 00:00:46,810 --> 00:00:49,060 so this is how they work. 12 00:00:49,060 --> 00:00:55,300 Now let's have a look at when we should use which. The advantage about CSS classes is that they're 13 00:00:55,300 --> 00:00:56,030 reusable, 14 00:00:56,110 --> 00:01:00,780 you can add them to any HTML element which should get a certain style, 15 00:01:01,120 --> 00:01:06,300 they allow you to mark and name things for styling purposes only. 16 00:01:06,340 --> 00:01:11,050 With that I mean that you create these classes only to apply certain styles, 17 00:01:11,050 --> 00:01:12,990 they don't really have any other meaning. 18 00:01:13,120 --> 00:01:17,470 You can use them in conjunction with Javascript as you will see later in the course but that's about 19 00:01:17,470 --> 00:01:17,840 it 20 00:01:17,920 --> 00:01:22,350 and even then, it's often tied to CSS related logic. 21 00:01:22,750 --> 00:01:30,310 So classes are really something strongly connected to CSS and therefore, using a class to styles something 22 00:01:30,490 --> 00:01:32,430 is rarely wrong. 23 00:01:32,740 --> 00:01:40,120 They should be your first pick because other selectors, like for example tag selectors, often have the disadvantage 24 00:01:40,120 --> 00:01:41,580 of giving you less control, 25 00:01:41,680 --> 00:01:47,620 it's easy to mess something up just because you style your h1 tag with the tag selector and you 26 00:01:47,620 --> 00:01:51,370 accidentally style some other h1 tag on the same page in the same way 27 00:01:51,520 --> 00:01:53,050 even though you didn't want to do that. 28 00:01:53,230 --> 00:01:59,050 So only use tag selectors for some generic styles that really should affect all elements of that tag. 29 00:01:59,650 --> 00:02:00,330 Class selectors 30 00:02:00,330 --> 00:02:02,620 on the other hand are always a good choice 31 00:02:02,670 --> 00:02:09,070 and they're the most used selector type therefore. ID selectors can be a decent choice too though. They're 32 00:02:09,100 --> 00:02:13,330 only used once per page or an ID is only used once per page I should say 33 00:02:13,600 --> 00:02:18,820 and therefore, if you get a certain style that really should just affect one element on your page and 34 00:02:18,820 --> 00:02:23,080 never more, using an ID selector definitely is not a bad idea. 35 00:02:23,470 --> 00:02:29,860 However, it's important to keep in mind that IDs also got a none CSS meaning on your page, 36 00:02:29,950 --> 00:02:33,090 mostly the thing that you can link to IDs. 37 00:02:33,250 --> 00:02:35,410 I'll show this on the demo project 38 00:02:35,410 --> 00:02:36,590 in a second. 39 00:02:36,760 --> 00:02:42,580 So therefore using IDs just to apply a style is not really something I can recommend, 40 00:02:42,610 --> 00:02:43,960 use a class instead 41 00:02:44,020 --> 00:02:50,300 even if you only use it once because the ID introduces some other effects which are not horrible or 42 00:02:50,300 --> 00:02:55,940 unnecessarily bad but all is not optimal maybe. So therefore use ID selectors 43 00:02:55,990 --> 00:03:02,290 if you planned on using an ID anyways, if it semantically makes sense but don't just add them because 44 00:03:02,290 --> 00:03:03,900 you want to add some style. 45 00:03:03,910 --> 00:03:08,990 Now let's have a look at what I mean with that linking thing. Back on our page, 46 00:03:09,070 --> 00:03:15,530 if we inspect the HTML code, you can see that on both anchor tags, I actually linked to an ID, 47 00:03:15,580 --> 00:03:19,090 we do this by adding a hashtag and then the name of the ID. 48 00:03:19,180 --> 00:03:25,780 The IDs are then used on the sections and because the sections have a height of 800 pixels, simply 49 00:03:25,780 --> 00:03:28,270 just to ensure that we can scroll on the page, 50 00:03:28,330 --> 00:03:31,120 I can actually show you what these links will do. 51 00:03:31,380 --> 00:03:38,410 If we go back to the page, I can scroll down to the outro section here but I can also click on outro and 52 00:03:38,410 --> 00:03:46,030 then my browser will jump there, because in the URL, it added outro at the end of the URL. This is 53 00:03:46,150 --> 00:03:48,760 one thing that's baked into HTML, 54 00:03:48,820 --> 00:03:52,710 it's not related to CSS at all, has nothing to do with it. 55 00:03:52,750 --> 00:03:53,750 It's a nice behavior, 56 00:03:53,770 --> 00:03:56,560 it allows you to link on a page. 57 00:03:56,560 --> 00:04:02,950 It also means that IDs are not just there for styling purposes though, that is what I meant on the previous 58 00:04:02,950 --> 00:04:03,430 slide.