1 00:00:02,070 --> 00:00:04,780 We added our CSS variables 2 00:00:04,780 --> 00:00:06,689 to the HTML selector. 3 00:00:06,689 --> 00:00:09,190 The reason for this was that the HTML element 4 00:00:09,190 --> 00:00:13,560 is the so-called root element of our HTML file 5 00:00:13,560 --> 00:00:17,150 and variables are only available to elements 6 00:00:17,150 --> 00:00:21,580 which are nested into the element that holds the variable. 7 00:00:21,580 --> 00:00:25,290 While, as the HTML element holds all other elements 8 00:00:25,290 --> 00:00:26,400 in our project, 9 00:00:26,400 --> 00:00:30,660 the variables are available for all elements in our project. 10 00:00:30,660 --> 00:00:33,060 Nevertheless, with the HTML selector, 11 00:00:33,060 --> 00:00:35,200 I would like to take the chance to have a look at 12 00:00:35,200 --> 00:00:39,820 three selector types which you probably might come across. 13 00:00:39,820 --> 00:00:43,030 The first one here is, well, the HTML selector. 14 00:00:43,030 --> 00:00:45,630 The second one is the :root selector, 15 00:00:45,630 --> 00:00:46,900 written ":root" 16 00:00:46,900 --> 00:00:49,510 a so-called pseudo-selector. 17 00:00:49,510 --> 00:00:52,933 And finally, we have this asterisk selector. 18 00:00:53,880 --> 00:00:57,350 The HTML selector selects the HTML element, 19 00:00:57,350 --> 00:01:01,410 which is the so-called root element of an HTML file. 20 00:01:01,410 --> 00:01:02,930 This basically means that, 21 00:01:02,930 --> 00:01:07,410 CSS rules that we add to the HTML selector 22 00:01:07,410 --> 00:01:09,730 are applied to the HTML element 23 00:01:09,730 --> 00:01:13,320 and also inherited to nested elements 24 00:01:13,320 --> 00:01:15,120 inside the HTML element. 25 00:01:15,120 --> 00:01:17,783 This was the logic we used for our variables. 26 00:01:19,210 --> 00:01:22,380 Now, I said that the HTML element is the root element 27 00:01:22,380 --> 00:01:23,820 of and HTML file. 28 00:01:23,820 --> 00:01:26,683 So, why do we have this :root pseudo-selector? 29 00:01:28,100 --> 00:01:29,700 Well, the :root pseudo-selector 30 00:01:29,700 --> 00:01:33,910 selects an element which is the root of the document. 31 00:01:33,910 --> 00:01:36,050 And turns out that, well, 32 00:01:36,050 --> 00:01:37,870 CSS rules are, in this case, 33 00:01:37,870 --> 00:01:42,170 applied to the root element and inherited to nested elements 34 00:01:42,170 --> 00:01:43,703 inside the root element. 35 00:01:44,900 --> 00:01:46,720 If you closely look at the text 36 00:01:46,720 --> 00:01:50,103 between the HTML selector and the root selector, 37 00:01:50,103 --> 00:01:52,690 it's basically the same. 38 00:01:52,690 --> 00:01:54,810 But there are two things to keep in mind 39 00:01:54,810 --> 00:01:57,530 when seeing these two selectors. 40 00:01:57,530 --> 00:02:00,700 The first one is, that the HTML element 41 00:02:00,700 --> 00:02:04,120 is the root element of an HTML document. 42 00:02:04,120 --> 00:02:05,080 This is true. 43 00:02:05,080 --> 00:02:07,560 So, for HTML related projects, 44 00:02:07,560 --> 00:02:09,090 a web table, for example, 45 00:02:09,090 --> 00:02:13,070 both selectors will basically do the same. 46 00:02:13,070 --> 00:02:17,110 There are other areas though, where you can us CSS. 47 00:02:17,110 --> 00:02:21,910 CSS cannot only be used related to HTML 48 00:02:21,910 --> 00:02:24,760 and there you specifically might want to target 49 00:02:24,760 --> 00:02:25,890 the :root element. 50 00:02:25,890 --> 00:02:27,950 Therefore, you have this :root selector 51 00:02:27,950 --> 00:02:31,840 to select the first element in a specific document type. 52 00:02:31,840 --> 00:02:33,090 In the case of HTML, 53 00:02:33,090 --> 00:02:35,360 well, HTML is the root element. 54 00:02:35,360 --> 00:02:38,960 Therefore, these selectors are basically the same. 55 00:02:38,960 --> 00:02:39,990 One thing to note though, 56 00:02:39,990 --> 00:02:42,400 is that the so-called specificity, 57 00:02:42,400 --> 00:02:43,520 we talked about this, 58 00:02:43,520 --> 00:02:44,820 of the :root selector, 59 00:02:44,820 --> 00:02:47,890 is higher than the one of the HTML selector. 60 00:02:47,890 --> 00:02:50,340 Which doesn't play a big role in our case though. 61 00:02:51,400 --> 00:02:54,110 Finally, we have this asterisk selector though. 62 00:02:54,110 --> 00:02:55,140 The third one. 63 00:02:55,140 --> 00:02:57,310 Well, this selector simply selects 64 00:02:57,310 --> 00:03:00,200 all elements of the HTML document. 65 00:03:00,200 --> 00:03:03,660 And this means that the CSS rules are directly applied 66 00:03:03,660 --> 00:03:05,210 to all elements. 67 00:03:05,210 --> 00:03:07,650 Specificity still plays a role though 68 00:03:07,650 --> 00:03:10,730 but the difference between the HTML and :root selector 69 00:03:10,730 --> 00:03:13,240 versus the asterisk selector, is that, 70 00:03:13,240 --> 00:03:15,230 for the HTML and :root selector 71 00:03:15,230 --> 00:03:20,120 the rules are inherited by nested elements. 72 00:03:20,120 --> 00:03:21,740 Whereas, the asterisk selector 73 00:03:21,740 --> 00:03:24,410 directly adds the rules to all elements 74 00:03:24,410 --> 00:03:26,690 inside our HTML document. 75 00:03:26,690 --> 00:03:29,270 This was just an important info to conclude 76 00:03:29,270 --> 00:03:31,720 this variables part of this module. 77 00:03:31,720 --> 00:03:32,590 As I said, 78 00:03:32,590 --> 00:03:35,340 it's not too important for us at this stage 79 00:03:35,340 --> 00:03:36,690 but if you ever come across 80 00:03:38,244 --> 00:03:39,970 the HTML, the :root or the asterisk selector, 81 00:03:39,970 --> 00:03:41,910 you can refer to this slide 82 00:03:41,910 --> 00:03:45,080 to remember what the differences are. 83 00:03:45,080 --> 00:03:45,913 With this, 84 00:03:45,913 --> 00:03:49,690 I will now conclude this variables part 85 00:03:49,690 --> 00:03:52,530 and dive into another new CSS topic. 86 00:03:52,530 --> 00:03:54,380 Which is also great when it comes to 87 00:03:54,380 --> 00:03:56,633 create nice looking websites.