1 00:00:02,150 --> 00:00:05,280 Our website and every website out there 2 00:00:05,280 --> 00:00:09,150 follows a certain HTML structure. 3 00:00:09,150 --> 00:00:11,900 The structure is based on the fact that we have 4 00:00:11,900 --> 00:00:15,270 an HTML opening and closing tag, 5 00:00:15,270 --> 00:00:19,920 which means that our HTML element is the so-called container 6 00:00:19,920 --> 00:00:23,300 of the head for the metadata 7 00:00:23,300 --> 00:00:26,203 and the body for the actual website content. 8 00:00:27,090 --> 00:00:30,910 We learned that we have the indentation as a visual helper 9 00:00:30,910 --> 00:00:34,940 to see which elements are part of another element or which 10 00:00:34,940 --> 00:00:38,283 element is nested into another element. 11 00:00:39,170 --> 00:00:41,030 If we focus on to the body, 12 00:00:41,030 --> 00:00:42,820 we see that the body element here 13 00:00:42,820 --> 00:00:46,140 is nested into the HTML element. 14 00:00:46,140 --> 00:00:47,707 We see that the h1 element, 15 00:00:47,707 --> 00:00:51,230 the anchor and the ordered list here are well then nested 16 00:00:51,230 --> 00:00:55,123 into the body and that our free list items here 17 00:00:55,123 --> 00:00:57,723 are nested into the ordered list. 18 00:00:58,900 --> 00:01:00,570 This structure doesn't only help 19 00:01:00,570 --> 00:01:02,770 to keep our code organized, tho. 20 00:01:02,770 --> 00:01:07,430 It also has a huge impact on the way we write our CSS code 21 00:01:07,430 --> 00:01:10,133 and how CSS rules are applied. 22 00:01:11,130 --> 00:01:14,070 The example we had in the ordered list here 23 00:01:14,070 --> 00:01:15,530 showed us this already. 24 00:01:15,530 --> 00:01:17,877 We had the option to apply the list style, 25 00:01:17,877 --> 00:01:20,050 "none" rule to our list item. 26 00:01:20,050 --> 00:01:23,960 So to each single list item to be more precise here 27 00:01:23,960 --> 00:01:26,350 or alternatively to the ordered list. 28 00:01:26,350 --> 00:01:27,570 Both worked in the end, 29 00:01:27,570 --> 00:01:31,970 but adding the style to the list item as we did it here, 30 00:01:31,970 --> 00:01:36,060 somehow won against the style here in the ordered list. 31 00:01:36,060 --> 00:01:38,463 Something we'll come back to in a few minutes. 32 00:01:39,340 --> 00:01:42,420 But the important thing is that this relationship we see in 33 00:01:42,420 --> 00:01:46,730 our website, so list items nested into an ordered list, 34 00:01:46,730 --> 00:01:50,020 h1 anchor and ordered list nested into the body 35 00:01:50,020 --> 00:01:52,850 and the body nested into the HTML element 36 00:01:52,850 --> 00:01:56,173 is a so-called parent-child relationship. 37 00:01:57,280 --> 00:01:59,760 So we have the list items, free children here, 38 00:01:59,760 --> 00:02:03,670 which are children of what the ordered list as a parent. 39 00:02:03,670 --> 00:02:06,517 The ordered list is also a child of the body tho, 40 00:02:06,517 --> 00:02:09,703 and the body is a child of the HTML element. 41 00:02:11,090 --> 00:02:14,170 Same thing applies for h1 NT anchor tag, 42 00:02:14,170 --> 00:02:17,970 both are children of the body element here. 43 00:02:17,970 --> 00:02:20,760 Now, why am I emphasizing this? 44 00:02:20,760 --> 00:02:24,020 Well, because the logic we solve for the ordered list 45 00:02:24,020 --> 00:02:26,000 with a rule being applied to the parent 46 00:02:26,000 --> 00:02:28,850 and where this rule is also applied to the children, 47 00:02:28,850 --> 00:02:31,720 only works with such structures. 48 00:02:31,720 --> 00:02:33,210 Let's have a close look at this. 49 00:02:33,210 --> 00:02:34,940 And for that, I will go through 50 00:02:34,940 --> 00:02:38,320 the full week's CSS file and comment this out, 51 00:02:38,320 --> 00:02:41,130 and also comment this style out. 52 00:02:41,130 --> 00:02:43,770 As a result, our numbers here are back. 53 00:02:43,770 --> 00:02:46,720 However, in our structures so far in the website, 54 00:02:46,720 --> 00:02:48,880 we made use of this concept 55 00:02:48,880 --> 00:02:52,960 of specific rules being applied to child elements. 56 00:02:52,960 --> 00:02:54,433 So to nested elements. 57 00:02:55,340 --> 00:02:57,893 If we select the body as a thread right here, 58 00:02:58,840 --> 00:03:02,823 we see that the body has this color property applied. 59 00:03:03,870 --> 00:03:07,700 This property is also applied to the bodies' children 60 00:03:07,700 --> 00:03:09,630 with the exception of the anchor tag here, 61 00:03:09,630 --> 00:03:10,900 this has a different color, 62 00:03:10,900 --> 00:03:13,960 we'll discover why this is happening here in a few minutes. 63 00:03:13,960 --> 00:03:16,500 But generally we see that the color is applied 64 00:03:16,500 --> 00:03:20,010 to the h1 element as can be seen down here, 65 00:03:20,010 --> 00:03:24,180 inherited from body color and to the ordered list. 66 00:03:24,180 --> 00:03:25,323 Same logic here. 67 00:03:26,700 --> 00:03:27,910 Let's focus on to the list 68 00:03:27,910 --> 00:03:30,090 and let's check out the list items. 69 00:03:30,090 --> 00:03:33,160 Here, you'll also see that the color property here 70 00:03:33,160 --> 00:03:35,410 is inherited from the body. 71 00:03:35,410 --> 00:03:38,060 So what this means is that rules, 72 00:03:38,060 --> 00:03:40,100 so property value combinations, 73 00:03:40,100 --> 00:03:42,200 which are applied to the parent 74 00:03:42,200 --> 00:03:45,300 are also applied to the children. 75 00:03:45,300 --> 00:03:47,290 So the ordered list here, for example, 76 00:03:47,290 --> 00:03:51,540 and to children of the children, so-called descendants. 77 00:03:51,540 --> 00:03:54,380 This is not the case for all properties 78 00:03:54,380 --> 00:03:57,850 and for all elements, we see this with the anchor tag here, 79 00:03:57,850 --> 00:04:00,510 but generally nesting elements means 80 00:04:00,510 --> 00:04:03,520 that certain rules can be inherited, 81 00:04:03,520 --> 00:04:07,383 so also applied to children and descendants. 82 00:04:08,240 --> 00:04:09,810 Now, things are a bit different 83 00:04:09,810 --> 00:04:13,870 if we go back to our full week CSS file 84 00:04:13,870 --> 00:04:16,713 and now apply a different color to the ordered list. 85 00:04:17,839 --> 00:04:19,899 Let's set the color property 86 00:04:19,899 --> 00:04:24,900 to RGB of 255, 255 and zero. 87 00:04:24,980 --> 00:04:27,520 This should be kind of a yellow tone. 88 00:04:27,520 --> 00:04:28,830 And if we go back, 89 00:04:28,830 --> 00:04:32,210 we see that the yellow color is applied to the list items. 90 00:04:32,210 --> 00:04:34,430 So again if we check this, 91 00:04:34,430 --> 00:04:37,870 we now see that the inherited from body section shows us 92 00:04:37,870 --> 00:04:40,750 that the color property is striped through 93 00:04:40,750 --> 00:04:44,100 because we inherited the color from the ordered list. 94 00:04:44,100 --> 00:04:46,630 So from the parent, not from the body, 95 00:04:46,630 --> 00:04:50,580 which would be an ancestor of our list items. 96 00:04:50,580 --> 00:04:53,020 You don't have to remember all these terms, by the way, 97 00:04:53,020 --> 00:04:54,100 I'm just mentioning this 98 00:04:54,100 --> 00:04:56,460 because you might read this terms. 99 00:04:56,460 --> 00:04:58,000 In the end, you can always remember 100 00:04:58,000 --> 00:05:01,020 this parent-child and here parent-child combination again, 101 00:05:01,020 --> 00:05:02,790 that's the easiest way to come along 102 00:05:02,790 --> 00:05:04,920 with such relations here. 103 00:05:04,920 --> 00:05:06,120 However, 104 00:05:06,120 --> 00:05:08,380 we see that the ordered list color 105 00:05:08,380 --> 00:05:10,220 was added to the list items, 106 00:05:10,220 --> 00:05:13,490 but of course not to the h1 element, for example, 107 00:05:13,490 --> 00:05:18,090 because the h1 element is sitting next to the ordered lists. 108 00:05:18,090 --> 00:05:20,800 So we have the h1 element, opening closing tag. 109 00:05:20,800 --> 00:05:21,840 Then we have the anchor tag 110 00:05:21,840 --> 00:05:23,030 which we ignore for the moment. 111 00:05:23,030 --> 00:05:24,930 And then we have the ordered list. 112 00:05:24,930 --> 00:05:27,060 So all these elements are not nested, 113 00:05:27,060 --> 00:05:28,960 but sitting next to each other. 114 00:05:28,960 --> 00:05:31,170 So adding a property to other elements, 115 00:05:31,170 --> 00:05:34,183 only works if we have such nested structures. 116 00:05:35,070 --> 00:05:37,890 However, if we now add the color property 117 00:05:37,890 --> 00:05:40,880 also to our list here, 118 00:05:40,880 --> 00:05:45,280 and now we'll take RGB maybe, let's say, 100, zero, 119 00:05:45,280 --> 00:05:46,803 just as reddish tone here. 120 00:05:48,380 --> 00:05:51,420 Then you see it, that all list items are red again. 121 00:05:51,420 --> 00:05:54,670 So again, somehow defining the color 122 00:05:54,670 --> 00:05:58,110 on the specific list item seems to override 123 00:05:58,110 --> 00:06:00,550 the definition in the ordered list. 124 00:06:00,550 --> 00:06:01,680 So in the parent, 125 00:06:01,680 --> 00:06:05,000 we can again see this here in the def tools 126 00:06:05,000 --> 00:06:07,030 here in the inherited part from the ordered list, 127 00:06:07,030 --> 00:06:11,400 the color is strike true because we define the color 128 00:06:11,400 --> 00:06:13,643 directly on our list item. 129 00:06:14,560 --> 00:06:17,550 This is also the reason why our anchor tag here 130 00:06:17,550 --> 00:06:18,683 has a different color. 131 00:06:19,710 --> 00:06:22,620 Let me first comment this out here quickly maybe, 132 00:06:22,620 --> 00:06:25,070 and also the same thing right here for the color, 133 00:06:26,250 --> 00:06:28,750 because the anchor tag has this purple tone. 134 00:06:28,750 --> 00:06:31,000 Well, if we select the anchor tag, 135 00:06:31,000 --> 00:06:34,660 we see that in inherited from body, 136 00:06:34,660 --> 00:06:36,283 the color is strike true, 137 00:06:37,590 --> 00:06:40,120 because we specifically defined the color 138 00:06:40,120 --> 00:06:41,360 for this anchor tag. 139 00:06:41,360 --> 00:06:43,000 Therefore, this color wins. 140 00:06:43,000 --> 00:06:44,810 If you would unselect this, 141 00:06:44,810 --> 00:06:47,810 then it doesn't become grayish or this black tone 142 00:06:47,810 --> 00:06:50,170 that we have, it becomes blue. 143 00:06:50,170 --> 00:06:54,880 Why? Well, because here we have a specific color definition. 144 00:06:54,880 --> 00:06:56,460 This color web could link here, 145 00:06:56,460 --> 00:06:59,980 which is a specific default color that is applied 146 00:06:59,980 --> 00:07:03,300 by the browser for links. 147 00:07:03,300 --> 00:07:04,660 So that's interesting here, 148 00:07:04,660 --> 00:07:07,200 we have the situation where we have two children, 149 00:07:07,200 --> 00:07:09,300 anchor tag, and ordered list, for example. 150 00:07:09,300 --> 00:07:11,260 Both children of the body. 151 00:07:11,260 --> 00:07:12,680 In case of the ordered list, 152 00:07:12,680 --> 00:07:15,323 the color is overtaken or inherited. 153 00:07:16,320 --> 00:07:18,540 For the anchor tag this is not the case, 154 00:07:18,540 --> 00:07:21,870 as we seem to have some kind of a default color 155 00:07:21,870 --> 00:07:24,633 for anchor tags added by the browser. 156 00:07:25,540 --> 00:07:28,660 However, this is what it is for the moment. 157 00:07:28,660 --> 00:07:32,090 We'll of course, dive deeper here in the next minutes. 158 00:07:32,090 --> 00:07:36,180 Let's now go back to our full week CSS file though, 159 00:07:36,180 --> 00:07:38,990 and comment back in our list style, 160 00:07:38,990 --> 00:07:42,860 none property value combination here to well, 161 00:07:42,860 --> 00:07:46,190 remove this list style from our list. 162 00:07:46,190 --> 00:07:49,820 If we do that, then the numbering here is gone. 163 00:07:49,820 --> 00:07:52,730 We now have this list style is set to none. 164 00:07:52,730 --> 00:07:55,950 The default list style type is strike through, 165 00:07:55,950 --> 00:08:00,890 and therefore our list item here, inherits this none style. 166 00:08:00,890 --> 00:08:05,433 So this all seems to be a bit random tho, right? 167 00:08:06,330 --> 00:08:10,020 We see that we can define styles on different elements. 168 00:08:10,020 --> 00:08:13,640 Some things get inherited, some things get not. 169 00:08:13,640 --> 00:08:17,530 We see that we can override specific styles. 170 00:08:17,530 --> 00:08:19,700 For example, if I comment back 171 00:08:19,700 --> 00:08:23,363 in our list style square property here, 172 00:08:25,030 --> 00:08:26,720 then we see that the list style is back again 173 00:08:26,720 --> 00:08:28,300 with the square bullet points. 174 00:08:28,300 --> 00:08:29,450 Although we actually set 175 00:08:29,450 --> 00:08:33,450 the list style here on our ordered list. 176 00:08:33,450 --> 00:08:35,820 So, what is the logic behind that? 177 00:08:35,820 --> 00:08:38,350 This is what we will explore in the next lecture. 178 00:08:38,350 --> 00:08:42,193 So we'll dive deeper into the internals of CSS now.