1 00:00:00,540 --> 00:00:04,560 Instructor: Hi, guys, welcome to another lesson on CSS. 2 00:00:04,560 --> 00:00:08,670 In this lesson, we're gonna be talking about CSS selectors, 3 00:00:08,670 --> 00:00:13,670 and this is going to help us choose where to apply our CSS. 4 00:00:14,760 --> 00:00:18,840 We've seen previously that we can create CSS rules 5 00:00:18,840 --> 00:00:21,540 by simply specifying two things. 6 00:00:21,540 --> 00:00:25,320 One is the property we want to change. 7 00:00:25,320 --> 00:00:26,813 And after a colon, 8 00:00:26,813 --> 00:00:31,813 we get to specify the value to change that property to. 9 00:00:32,369 --> 00:00:33,360 In this case, 10 00:00:33,360 --> 00:00:36,930 what we're saying is we wanna change the text color 11 00:00:36,930 --> 00:00:39,600 into a blue color. 12 00:00:39,600 --> 00:00:42,210 Now we've come across some of these rules already 13 00:00:42,210 --> 00:00:44,730 and I'll be showing you in a later lesson 14 00:00:44,730 --> 00:00:48,570 in the next section how to find out more about these rules. 15 00:00:48,570 --> 00:00:50,910 But more importantly, in this lesson, 16 00:00:50,910 --> 00:00:52,020 what I want to talk about 17 00:00:52,020 --> 00:00:54,990 is the part outside of these rules. 18 00:00:54,990 --> 00:00:58,230 It's the part that comes right here. 19 00:00:58,230 --> 00:01:02,790 And this is known as a CSS selector. 20 00:01:02,790 --> 00:01:04,920 What is a CSS selector? 21 00:01:04,920 --> 00:01:08,970 Well, it's the part that selects the HTML 22 00:01:08,970 --> 00:01:11,970 in order to apply whichever rules 23 00:01:11,970 --> 00:01:15,480 go in between these curly braces. 24 00:01:15,480 --> 00:01:18,720 How do we know which part of our HMTL file 25 00:01:18,720 --> 00:01:21,030 to make the text color blue? 26 00:01:21,030 --> 00:01:22,560 Well, we look at this part 27 00:01:22,560 --> 00:01:25,980 and we can see we're targeting the h1. 28 00:01:25,980 --> 00:01:27,960 Now this style of selector 29 00:01:27,960 --> 00:01:30,870 is one of the simplest CSS selectors. 30 00:01:30,870 --> 00:01:32,790 It's called an element selector, 31 00:01:32,790 --> 00:01:37,679 and all it does is it selects a particular HTML tag. 32 00:01:37,679 --> 00:01:42,180 So in this case it's targeting all h1s. 33 00:01:42,180 --> 00:01:44,160 If your HTML is any good, 34 00:01:44,160 --> 00:01:47,790 you should only have a single h1, 35 00:01:47,790 --> 00:01:49,710 but it'll be different for other tags. 36 00:01:49,710 --> 00:01:53,910 If you had anchor tags, or if you had paragraph tags, 37 00:01:53,910 --> 00:01:57,240 or h2s, or any of the other HTML tags, 38 00:01:57,240 --> 00:02:01,410 then when you select each of these in your CSS, 39 00:02:01,410 --> 00:02:05,401 it means apply to all elements 40 00:02:05,401 --> 00:02:08,610 that have that particular tag. 41 00:02:08,610 --> 00:02:10,743 Let's see this in action. 42 00:02:11,880 --> 00:02:13,980 Here, I've got two files. 43 00:02:13,980 --> 00:02:18,980 One is the index.html and another is our style sheet. 44 00:02:19,290 --> 00:02:22,290 And inside our index.html, 45 00:02:22,290 --> 00:02:26,670 we've just got three h2s, Red, Green, and Blue. 46 00:02:26,670 --> 00:02:28,598 And when displayed or run, 47 00:02:28,598 --> 00:02:31,830 they'll look like this, three headings. 48 00:02:31,830 --> 00:02:35,610 Now, if we go ahead and add a little bit of CSS 49 00:02:35,610 --> 00:02:39,330 and target our h2 element, 50 00:02:39,330 --> 00:02:42,127 in this case, we're using an element selector 51 00:02:42,127 --> 00:02:45,570 which is simply the name of the tag, 52 00:02:45,570 --> 00:02:47,880 and then after the curly braces, 53 00:02:47,880 --> 00:02:51,060 we can define whichever CSS rules we want. 54 00:02:51,060 --> 00:02:54,930 In this case, turning the color of the text red. 55 00:02:54,930 --> 00:02:56,495 If we go ahead and run this code, 56 00:02:56,495 --> 00:03:00,124 I want you to imagine what you expect to happen, 57 00:03:00,124 --> 00:03:03,600 which of these texts will turn red? 58 00:03:03,600 --> 00:03:05,010 Let's go and run the code. 59 00:03:05,010 --> 00:03:08,220 And once this change is incorporated, this is what we see. 60 00:03:08,220 --> 00:03:10,530 Red, Green, and Blue all turn red 61 00:03:10,530 --> 00:03:13,380 because they are all h2s. 62 00:03:13,380 --> 00:03:15,775 And this element selector here 63 00:03:15,775 --> 00:03:18,810 selects all of the h2s, turning them red. 64 00:03:18,810 --> 00:03:21,030 So pretty simple so far. 65 00:03:21,030 --> 00:03:23,910 Now, let's look at another type of selector, 66 00:03:23,910 --> 00:03:25,920 a class selector. 67 00:03:25,920 --> 00:03:30,840 This requires a special symbol, which is the dot, 68 00:03:30,840 --> 00:03:32,310 and then after that dot, 69 00:03:32,310 --> 00:03:36,900 immediately with no spaces, right here, 70 00:03:36,900 --> 00:03:39,780 then you have the name of the class. 71 00:03:39,780 --> 00:03:43,140 So this is the actual name 72 00:03:43,140 --> 00:03:45,210 of the class that we're selecting. 73 00:03:45,210 --> 00:03:48,030 In this case, I've called it red-heading. 74 00:03:48,030 --> 00:03:49,680 And then after the curly braces, 75 00:03:49,680 --> 00:03:52,393 again, we have the same CSS rule to apply, 76 00:03:52,393 --> 00:03:54,903 change the text color to red. 77 00:03:56,070 --> 00:03:57,918 Now, what is a class? 78 00:03:57,918 --> 00:04:02,580 Well, a class is something that we can add as an attribute 79 00:04:02,580 --> 00:04:06,150 to any HTML element. 80 00:04:06,150 --> 00:04:09,127 And this attribute is kind of like saying, 81 00:04:09,127 --> 00:04:13,861 "Well, let's group these particular elements into a class." 82 00:04:13,861 --> 00:04:18,779 So it's used for grouping elements in your HTML file 83 00:04:18,779 --> 00:04:21,990 to apply the same CSS rule to all of them. 84 00:04:21,990 --> 00:04:26,640 So in this case, we've only got one h2 that has a class, 85 00:04:26,640 --> 00:04:30,300 and the class is set to red text. 86 00:04:30,300 --> 00:04:34,440 Now, when I go ahead and write some CSS 87 00:04:34,440 --> 00:04:36,630 and I target the class, 88 00:04:36,630 --> 00:04:39,210 which, remember, requires the dot 89 00:04:39,210 --> 00:04:42,570 and then the name of the class, which is this, 90 00:04:42,570 --> 00:04:45,360 and it has to be spelled exactly the same. 91 00:04:45,360 --> 00:04:47,790 These two cannot have any differences. 92 00:04:47,790 --> 00:04:52,140 So you can't have, for example, a capital R or a capital T. 93 00:04:52,140 --> 00:04:54,660 This will not work. 94 00:04:54,660 --> 00:04:58,470 Instead, what we have is our class selector 95 00:04:58,470 --> 00:05:00,420 and our CSS rule. 96 00:05:00,420 --> 00:05:02,460 What do you expect will happen 97 00:05:02,460 --> 00:05:05,550 when the code is run in the browser 98 00:05:05,550 --> 00:05:08,280 when this CSS gets applied? 99 00:05:08,280 --> 00:05:10,620 Well, it'll look like this. 100 00:05:10,620 --> 00:05:14,610 It selects the only element that has that class 101 00:05:14,610 --> 00:05:17,790 and turns the text color red. 102 00:05:17,790 --> 00:05:22,560 Now what if we had multiple elements with the same class? 103 00:05:22,560 --> 00:05:24,540 So here you can see we've actually got 104 00:05:24,540 --> 00:05:27,990 two different types of HTML elements. 105 00:05:27,990 --> 00:05:32,990 One is an h2 and another is a paragraph element. 106 00:05:33,120 --> 00:05:36,120 Even though these two are completely different elements, 107 00:05:36,120 --> 00:05:38,580 we can tag them using the same class. 108 00:05:38,580 --> 00:05:41,610 We're saying the h2 should have the class of red text 109 00:05:41,610 --> 00:05:44,370 as should the paragraph. 110 00:05:44,370 --> 00:05:47,520 Now, if we write our CSS 111 00:05:47,520 --> 00:05:52,520 and we select, again, all the classes that have red text, 112 00:05:52,740 --> 00:05:55,380 then what do you think will happen? 113 00:05:55,380 --> 00:05:59,460 Well, in this case, it doesn't matter if it's an h2 114 00:05:59,460 --> 00:06:01,920 or if it's a paragraph, 115 00:06:01,920 --> 00:06:03,840 as long as they've got that class, 116 00:06:03,840 --> 00:06:06,810 they've been converted into red text 117 00:06:06,810 --> 00:06:11,810 and the style has been applied to these two HTML elements. 118 00:06:12,510 --> 00:06:16,620 As you can see, the class selector is really versatile. 119 00:06:16,620 --> 00:06:19,890 It allows you to group different parts of your HTML file 120 00:06:19,890 --> 00:06:22,650 into having the same styling. 121 00:06:22,650 --> 00:06:24,570 And this can be really, really useful 122 00:06:24,570 --> 00:06:28,200 on multi-page websites with lots of different elements, 123 00:06:28,200 --> 00:06:29,790 and you don't just wanna select 124 00:06:29,790 --> 00:06:32,763 a particular type of HTML element. 125 00:06:33,840 --> 00:06:38,250 The next one I wanna show you is called the ID selector. 126 00:06:38,250 --> 00:06:42,150 And the id selector, it has its own special symbol 127 00:06:42,150 --> 00:06:45,750 which is a pound sign or a hashtag, 128 00:06:45,750 --> 00:06:48,810 and you put that pound sign, and again, no spaces 129 00:06:48,810 --> 00:06:53,810 in between the pound sign and the actual name of the id. 130 00:06:54,510 --> 00:06:57,420 And this selects all elements 131 00:06:57,420 --> 00:07:00,780 with a particular id attribute. 132 00:07:00,780 --> 00:07:03,480 This is what an id attribute looks like. 133 00:07:03,480 --> 00:07:05,670 It's simply the word id, 134 00:07:05,670 --> 00:07:07,200 and then after the equals sign, 135 00:07:07,200 --> 00:07:10,110 we can give it a particular id. 136 00:07:10,110 --> 00:07:13,530 And it works similarly to the class selector 137 00:07:13,530 --> 00:07:18,240 because if I go ahead and select this id of main 138 00:07:18,240 --> 00:07:21,240 and I apply these CSS changes, 139 00:07:21,240 --> 00:07:24,570 then you can see it will add the styling 140 00:07:24,570 --> 00:07:29,340 and apply it to the only element that has that id. 141 00:07:29,340 --> 00:07:30,960 So then what is the difference 142 00:07:30,960 --> 00:07:35,430 between the id and the class selector? 143 00:07:35,430 --> 00:07:40,430 Well, the class selector can be applied to many elements, 144 00:07:41,310 --> 00:07:43,800 whereas the id should be only applied 145 00:07:43,800 --> 00:07:48,800 to one element in a single HTML file. 146 00:07:49,050 --> 00:07:52,440 In a single HTML file, like our index.html, 147 00:07:52,440 --> 00:07:57,440 there should only be one id of this particular name, main. 148 00:07:58,620 --> 00:08:01,920 It should be completely unique. 149 00:08:01,920 --> 00:08:04,320 And this is the difference, 150 00:08:04,320 --> 00:08:08,070 if you had, say, three h2s, 151 00:08:08,070 --> 00:08:09,750 you can't select all of them 152 00:08:09,750 --> 00:08:13,530 using the element selector like this 153 00:08:13,530 --> 00:08:17,820 because that would select all of the h2s. 154 00:08:17,820 --> 00:08:22,820 Instead, you apply the id to the unique element 155 00:08:23,460 --> 00:08:26,460 that you want to apply your style to 156 00:08:26,460 --> 00:08:29,613 and it selects it in the HTML file. 157 00:08:30,450 --> 00:08:33,054 Again, remember, ids are unique, 158 00:08:33,054 --> 00:08:35,850 only one element per file, 159 00:08:35,850 --> 00:08:39,270 and classes, you can put on as many elements as you like 160 00:08:39,270 --> 00:08:40,623 to group them together. 161 00:08:41,520 --> 00:08:45,210 Another way that you can select parts of your HTML 162 00:08:45,210 --> 00:08:47,970 is using the attributes selector. 163 00:08:47,970 --> 00:08:51,960 So we know that we can create a HTML tag 164 00:08:51,960 --> 00:08:54,900 and add as many attributes as we like. 165 00:08:54,900 --> 00:08:59,900 So we had attributes such as id, or class, or draggable, 166 00:09:04,170 --> 00:09:09,170 or src for the images, or href for the anchor tags, 167 00:09:11,070 --> 00:09:14,730 or alt for the images, and a whole bunch more 168 00:09:14,730 --> 00:09:17,700 that we'll get to see in the future as well. 169 00:09:17,700 --> 00:09:20,490 Now, we can select these elements 170 00:09:20,490 --> 00:09:22,620 that have particular attributes 171 00:09:22,620 --> 00:09:27,620 or particular attributes values by using this notation. 172 00:09:28,200 --> 00:09:32,590 Notice the first part here is the HTML element 173 00:09:33,630 --> 00:09:35,520 that you want to select, 174 00:09:35,520 --> 00:09:39,780 and then using a set of square brackets, 175 00:09:39,780 --> 00:09:41,760 these ones right here, 176 00:09:41,760 --> 00:09:44,850 then inside we can include the attribute 177 00:09:44,850 --> 00:09:46,890 that you want to select. 178 00:09:46,890 --> 00:09:49,530 What this entire selector says 179 00:09:49,530 --> 00:09:53,610 is select all paragraph elements 180 00:09:53,610 --> 00:09:57,210 with the attribute draggable, 181 00:09:57,210 --> 00:10:00,930 and then apply this CSS style to it. 182 00:10:00,930 --> 00:10:03,960 What does this look like in HTML code? 183 00:10:03,960 --> 00:10:07,110 Well, here we've got three paragraph tags, 184 00:10:07,110 --> 00:10:08,460 but only one of them 185 00:10:08,460 --> 00:10:11,790 has the attribute draggable set to true. 186 00:10:11,790 --> 00:10:16,140 If we go ahead and apply the CSS style 187 00:10:16,140 --> 00:10:19,320 where we select the paragraph element 188 00:10:19,320 --> 00:10:24,320 with the draggable attribute and give it this CSS style, 189 00:10:25,350 --> 00:10:29,490 then when this CSS is applied to our HTML, 190 00:10:29,490 --> 00:10:31,110 this is what will happen. 191 00:10:31,110 --> 00:10:34,440 It will find the unique paragraph tag 192 00:10:34,440 --> 00:10:37,620 with that particular attribute. 193 00:10:37,620 --> 00:10:41,610 Now, you can go one step further with attribute selectors. 194 00:10:41,610 --> 00:10:45,360 You can actually select the value of the attribute 195 00:10:45,360 --> 00:10:48,300 that you want to apply your CSS to. 196 00:10:48,300 --> 00:10:52,470 So in this case, you can see we've got all three paragraphs 197 00:10:52,470 --> 00:10:55,080 with the same attribute, 198 00:10:55,080 --> 00:10:57,510 all the draggable attributes are set, 199 00:10:57,510 --> 00:10:59,220 but they're set to different values. 200 00:10:59,220 --> 00:11:01,260 So the first one is set to true 201 00:11:01,260 --> 00:11:03,570 and the other two are set to false. 202 00:11:03,570 --> 00:11:07,890 So now, we can actually write our CSS like this. 203 00:11:07,890 --> 00:11:10,980 We can select all the paragraph elements 204 00:11:10,980 --> 00:11:15,980 which has an attribute of draggable set and equal to false. 205 00:11:16,770 --> 00:11:21,600 And what this selector is gonna do, all of this, 206 00:11:21,600 --> 00:11:24,780 is it's going to look inside our file 207 00:11:24,780 --> 00:11:29,130 and it's gonna find these two paragraph elements 208 00:11:29,130 --> 00:11:32,520 in order to select and apply the CSS. 209 00:11:32,520 --> 00:11:34,830 When this CSS is applied, 210 00:11:34,830 --> 00:11:39,720 instead of the first one which previously was selected, 211 00:11:39,720 --> 00:11:44,720 we actually have the other two selected and turned red. 212 00:11:44,760 --> 00:11:49,050 This is again, a really versatile way of applying CSS, 213 00:11:49,050 --> 00:11:51,780 but as you can see, it selects on different things 214 00:11:51,780 --> 00:11:53,400 than what we've seen before, 215 00:11:53,400 --> 00:11:57,810 the element, the id, or the class selectors. 216 00:11:57,810 --> 00:11:59,910 The final selector I wanna talk about 217 00:11:59,910 --> 00:12:02,160 is the universal selector. 218 00:12:02,160 --> 00:12:05,730 And it's really simple, it's just an asterisk. 219 00:12:05,730 --> 00:12:08,850 And after the asterisk, you have your CSS rules. 220 00:12:08,850 --> 00:12:13,170 But what this means is it means select all. 221 00:12:13,170 --> 00:12:14,520 And when you apply this, 222 00:12:14,520 --> 00:12:17,250 it doesn't matter what class you've got, what id, 223 00:12:17,250 --> 00:12:20,550 what attributes set, which different elements, 224 00:12:20,550 --> 00:12:23,640 if you select all, it's going to apply the style 225 00:12:23,640 --> 00:12:27,810 to everything where the style sheet is active. 226 00:12:27,810 --> 00:12:28,643 And this is probably 227 00:12:28,643 --> 00:12:32,130 one of the simplest selectors to understand. 228 00:12:32,130 --> 00:12:34,170 So now that we've seen all the different ways 229 00:12:34,170 --> 00:12:36,690 that we can apply our CSS 230 00:12:36,690 --> 00:12:40,530 to different parts of the HTML using selectors, 231 00:12:40,530 --> 00:12:44,340 let's try and exercise where we experiment hands-on 232 00:12:44,340 --> 00:12:45,690 and see if you've understood 233 00:12:45,690 --> 00:12:48,390 all the concepts in this lesson. 234 00:12:48,390 --> 00:12:52,860 Now, once you've downloaded and extracted the starting files 235 00:12:52,860 --> 00:12:54,960 and have it open in VS Code, 236 00:12:54,960 --> 00:12:59,400 then I want you to go into the index.html file. 237 00:12:59,400 --> 00:13:02,340 And here, you'll notice a couple of things. 238 00:13:02,340 --> 00:13:06,630 Firstly, we've already set up the style sheet for you. 239 00:13:06,630 --> 00:13:10,170 So we've got an external style sheet set up using a link, 240 00:13:10,170 --> 00:13:15,170 and it's pointing to this file right here, the style.css. 241 00:13:15,180 --> 00:13:17,130 The part that we want you to do 242 00:13:17,130 --> 00:13:22,130 is to revise what you've learned about CSS selectors. 243 00:13:22,530 --> 00:13:24,780 And I've set up five TODOs for you 244 00:13:24,780 --> 00:13:26,850 and I want you to do them in order. 245 00:13:26,850 --> 00:13:29,340 So start from one, and then go to two, 246 00:13:29,340 --> 00:13:31,500 and continue downwards. 247 00:13:31,500 --> 00:13:33,240 What this is gonna involve 248 00:13:33,240 --> 00:13:37,110 is for you to write actual CSS code. 249 00:13:37,110 --> 00:13:39,690 I don't want you to actually touch anything 250 00:13:39,690 --> 00:13:42,750 inside the index.html 251 00:13:42,750 --> 00:13:45,870 because I don't want you to change any of the HTML 252 00:13:45,870 --> 00:13:49,140 with the classes or values or ids. 253 00:13:49,140 --> 00:13:51,480 Want you to leave it exactly as it is. 254 00:13:51,480 --> 00:13:55,260 And instead, your job is to write the selectors 255 00:13:55,260 --> 00:13:57,570 in the style.css. 256 00:13:57,570 --> 00:14:00,120 Notice when you open up the style.css, 257 00:14:00,120 --> 00:14:03,990 there's a little bit of CSS already here for you. 258 00:14:03,990 --> 00:14:05,760 And I want you to leave this alone. 259 00:14:05,760 --> 00:14:07,650 Don't touch it, don't change it. 260 00:14:07,650 --> 00:14:10,830 It's important so that the final styling looks right 261 00:14:10,830 --> 00:14:12,330 when we haven't covered 262 00:14:12,330 --> 00:14:15,330 all of the different CSS styling rules. 263 00:14:15,330 --> 00:14:16,260 In the next section, 264 00:14:16,260 --> 00:14:18,060 we're gonna be talking about all of this 265 00:14:18,060 --> 00:14:19,170 in a lot more detail, 266 00:14:19,170 --> 00:14:22,620 where to find out about different rules and how to use them. 267 00:14:22,620 --> 00:14:25,080 But for now, I want you to ignore this part 268 00:14:25,080 --> 00:14:27,543 and write your CSS below. 269 00:14:28,410 --> 00:14:30,750 Similarly, I'm not expecting you to know 270 00:14:30,750 --> 00:14:32,460 which CSS rules to use 271 00:14:32,460 --> 00:14:35,760 because I'll provide all the rules for you. 272 00:14:35,760 --> 00:14:39,090 In TODO 1, I want you to change the text color to red. 273 00:14:39,090 --> 00:14:42,030 In TODO 2, I want you to change the font size 274 00:14:42,030 --> 00:14:43,890 or change the text-align. 275 00:14:43,890 --> 00:14:46,800 And this is all gonna be provided for you 276 00:14:46,800 --> 00:14:48,180 completely formatted. 277 00:14:48,180 --> 00:14:50,970 So it's got the property, the colon, 278 00:14:50,970 --> 00:14:53,850 and the value I want you to set it to. 279 00:14:53,850 --> 00:14:55,890 Now, the part that you need to think about 280 00:14:55,890 --> 00:14:58,080 and where your challenge comes in 281 00:14:58,080 --> 00:15:01,200 is how to select the correct parts. 282 00:15:01,200 --> 00:15:04,260 So how to select all the paragraph, for example, 283 00:15:04,260 --> 00:15:07,530 or how to select parts with a class of this 284 00:15:07,530 --> 00:15:09,480 or an id of this. 285 00:15:09,480 --> 00:15:10,740 So that is the challenge. 286 00:15:10,740 --> 00:15:14,013 And this is what you need to do in this exercise. 287 00:15:14,880 --> 00:15:17,100 And if you take a look at the preview, 288 00:15:17,100 --> 00:15:21,870 right now, it's very plain, all black, no styling at all. 289 00:15:21,870 --> 00:15:24,390 But if you take a look at the goal.png, 290 00:15:24,390 --> 00:15:27,810 you'll see this is what the final outcome will look like. 291 00:15:27,810 --> 00:15:31,020 It's gonna be centered, it's gonna have different colors, 292 00:15:31,020 --> 00:15:34,920 and you can almost even use this website as a revision tool 293 00:15:34,920 --> 00:15:37,830 because each of the bullet points 294 00:15:37,830 --> 00:15:42,830 are linked to a particular style of CSS selection. 295 00:15:43,260 --> 00:15:47,550 This hopefully will be quite a fun challenge for you. 296 00:15:47,550 --> 00:15:49,290 And if you get stuck, 297 00:15:49,290 --> 00:15:51,660 be sure to rewind a little bit in the video 298 00:15:51,660 --> 00:15:54,030 to see how to do the different things 299 00:15:54,030 --> 00:15:56,550 as seen in the previous examples. 300 00:15:56,550 --> 00:15:58,560 And I want you to really give it a good go 301 00:15:58,560 --> 00:16:01,653 before you continue and watch the solution. 302 00:16:02,490 --> 00:16:04,383 Pause the video now, give this a go. 303 00:16:09,540 --> 00:16:11,100 All right, so the first thing we're gonna do 304 00:16:11,100 --> 00:16:12,540 is we're gonna pull up our preview 305 00:16:12,540 --> 00:16:15,840 to make sure we are doing the right things. 306 00:16:15,840 --> 00:16:19,740 And to begin, the first TODO is to set the CSS 307 00:16:19,740 --> 00:16:23,790 for all paragraph tags to this color. 308 00:16:23,790 --> 00:16:27,180 Now, remember, I said we are not writing any code 309 00:16:27,180 --> 00:16:29,940 or changing anything in the HTML side. 310 00:16:29,940 --> 00:16:33,060 We're doing it all in our CSS, 311 00:16:33,060 --> 00:16:35,100 but it's still really important 312 00:16:35,100 --> 00:16:37,860 that we look at what's in our HTML code 313 00:16:37,860 --> 00:16:41,400 in order to complete each of the steps of the challenge. 314 00:16:41,400 --> 00:16:42,420 The first one's easy. 315 00:16:42,420 --> 00:16:44,760 We're gonna target all paragraph tags 316 00:16:44,760 --> 00:16:47,250 and we're going to apply this CSS style. 317 00:16:47,250 --> 00:16:50,550 So let me copy the CSS style, paste it in. 318 00:16:50,550 --> 00:16:53,760 And now, I've got an error because I haven't selected 319 00:16:53,760 --> 00:16:56,550 what this style should be applied to. 320 00:16:56,550 --> 00:16:57,383 In this case, 321 00:16:57,383 --> 00:16:59,760 we're applying it to all the paragraph elements. 322 00:16:59,760 --> 00:17:02,130 So we're using the element selector. 323 00:17:02,130 --> 00:17:03,720 And all we have to do there 324 00:17:03,720 --> 00:17:08,339 is simply add the name of the tag and then apply it. 325 00:17:08,339 --> 00:17:13,339 And you can see the first line of our bullet is now red. 326 00:17:13,349 --> 00:17:15,660 That's TODO 1 done. 327 00:17:15,660 --> 00:17:17,760 Let's move on to the next TODO. 328 00:17:17,760 --> 00:17:19,680 So in this one we wanna set the CSS 329 00:17:19,680 --> 00:17:24,680 for all the elements with a class of this to this CSS rule. 330 00:17:26,430 --> 00:17:31,380 So let me, again, copy the CSS rule and then paste it below. 331 00:17:31,380 --> 00:17:34,950 And now, we're going to use a class selector 332 00:17:34,950 --> 00:17:36,990 and select all the elements. 333 00:17:36,990 --> 00:17:40,710 So notice how we've got many elements with the same class 334 00:17:40,710 --> 00:17:43,050 even though they're applied to different elements, 335 00:17:43,050 --> 00:17:47,160 but we can select across them using the class selector. 336 00:17:47,160 --> 00:17:49,860 The class selector, if you remember, requires the dot, 337 00:17:49,860 --> 00:17:51,930 and then immediately afterwards, 338 00:17:51,930 --> 00:17:54,090 we add in the name of the class 339 00:17:54,090 --> 00:17:56,310 and then we enclose our CSS rule 340 00:17:56,310 --> 00:17:58,620 in between the curly braces again. 341 00:17:58,620 --> 00:18:02,730 And what this has done is it's applied a larger font size 342 00:18:02,730 --> 00:18:05,340 to all of the HTML elements 343 00:18:05,340 --> 00:18:07,890 that have that class applied to them, 344 00:18:07,890 --> 00:18:12,630 which is all the bullets here, but not the h1 or h2s. 345 00:18:12,630 --> 00:18:14,790 So that's TODO 2 done. 346 00:18:14,790 --> 00:18:17,910 Next one is to set the CSS for the element 347 00:18:17,910 --> 00:18:20,940 with a particular unique id. 348 00:18:20,940 --> 00:18:22,860 And the id is this one. 349 00:18:22,860 --> 00:18:24,810 So which one has that id? 350 00:18:24,810 --> 00:18:27,270 It's this particular list element, 351 00:18:27,270 --> 00:18:30,210 and we're going to set it to have a CSS rule 352 00:18:30,210 --> 00:18:31,593 to turn to color green. 353 00:18:33,660 --> 00:18:36,720 With id names or class names or attribute names, 354 00:18:36,720 --> 00:18:37,590 any of that, 355 00:18:37,590 --> 00:18:41,400 it's very important that you don't make any spelling errors. 356 00:18:41,400 --> 00:18:43,920 What I normally do is I normally just copy it 357 00:18:43,920 --> 00:18:45,390 and then paste it in 358 00:18:45,390 --> 00:18:49,620 so that I don't actually mistakenly add a capitalize S 359 00:18:49,620 --> 00:18:52,710 or something else that I could write incorrectly. 360 00:18:52,710 --> 00:18:57,480 So remember, the id selector is a pound sign or a hashtag. 361 00:18:57,480 --> 00:19:02,130 And once we enclose our rule inside that selector, 362 00:19:02,130 --> 00:19:05,160 you'll see bullet number three turn green 363 00:19:05,160 --> 00:19:07,050 because that is the only item, 364 00:19:07,050 --> 00:19:11,823 and it should be only one item that has the same id. 365 00:19:12,870 --> 00:19:15,510 Now, let's move on to TODO 4, 366 00:19:15,510 --> 00:19:19,320 which is to set the CSS for the li elements 367 00:19:19,320 --> 00:19:24,090 that have the value attribute set to four. 368 00:19:24,090 --> 00:19:29,090 And notice now that all of the items in the ordered list, 369 00:19:30,030 --> 00:19:32,538 I've set a value attribute. 370 00:19:32,538 --> 00:19:34,860 And what this does, 371 00:19:34,860 --> 00:19:37,500 if you take a look at the MDN Web Docs 372 00:19:37,500 --> 00:19:40,320 for the list item element, 373 00:19:40,320 --> 00:19:44,820 is this attribute can indicate the current ordinal value 374 00:19:44,820 --> 00:19:46,440 of the list item. 375 00:19:46,440 --> 00:19:50,430 When you have a list item inside a ordered list, 376 00:19:50,430 --> 00:19:55,430 by default, it starts numbering from one, like so. 377 00:19:56,220 --> 00:19:58,530 This is this list item. 378 00:19:58,530 --> 00:20:01,830 But because I've got that paragraph tag above 379 00:20:01,830 --> 00:20:03,270 and I want to format this 380 00:20:03,270 --> 00:20:06,780 so that we have an interesting CSS exercise, 381 00:20:06,780 --> 00:20:09,420 I've set the value attribute 382 00:20:09,420 --> 00:20:14,420 so that the list starts from two, which is totally valid. 383 00:20:14,820 --> 00:20:18,060 And I've set it for all of the other items as well 384 00:20:18,060 --> 00:20:19,983 so that we continue the list. 385 00:20:21,660 --> 00:20:22,493 In this case, 386 00:20:22,493 --> 00:20:25,410 we're going to use the attribute selector 387 00:20:25,410 --> 00:20:29,700 to select this value attribute and turn the text blue. 388 00:20:29,700 --> 00:20:32,100 Let's paste in the CSS rule. 389 00:20:32,100 --> 00:20:32,970 And then, remember, 390 00:20:32,970 --> 00:20:35,160 the way that we use the attribute inspector 391 00:20:35,160 --> 00:20:40,160 is we first select the element, in this case, list item, 392 00:20:40,350 --> 00:20:42,570 and then we add some square brackets. 393 00:20:42,570 --> 00:20:44,250 And inside the square brackets, 394 00:20:44,250 --> 00:20:47,130 we add the attribute that we want to select, 395 00:20:47,130 --> 00:20:49,680 which in this case is called value. 396 00:20:49,680 --> 00:20:53,250 And if right now I already close these curly braces, 397 00:20:53,250 --> 00:20:56,070 so we select on that attribute, 398 00:20:56,070 --> 00:20:58,830 is going to turn all the list items 399 00:20:58,830 --> 00:21:02,400 that have a attribute of value set, 400 00:21:02,400 --> 00:21:05,400 which is basically all four of these. 401 00:21:05,400 --> 00:21:06,960 Now, some of you might have noticed 402 00:21:06,960 --> 00:21:09,960 that bullet number three remain green 403 00:21:09,960 --> 00:21:13,740 instead of turning blue like the rest of the list elements. 404 00:21:13,740 --> 00:21:15,660 Now, if you're curious about why this is, 405 00:21:15,660 --> 00:21:19,230 this is to do with something called CSS specificity, 406 00:21:19,230 --> 00:21:22,710 relating to how specific the rule is. 407 00:21:22,710 --> 00:21:25,860 Now, we're gonna be covering this in Section 7 408 00:21:25,860 --> 00:21:28,540 for our Advanced CSS module. 409 00:21:28,540 --> 00:21:31,170 So that's something you get to look forwards to 410 00:21:31,170 --> 00:21:32,013 in the future. 411 00:21:33,030 --> 00:21:35,790 Now, if we want to set the attribute 412 00:21:35,790 --> 00:21:39,150 that we want to select to a particular value, 413 00:21:39,150 --> 00:21:42,360 which in this case is the one that's four, 414 00:21:42,360 --> 00:21:44,340 then I have to go a little bit further 415 00:21:44,340 --> 00:21:47,580 and set this ="4". 416 00:21:47,580 --> 00:21:51,330 And now you can see it's only selecting this fourth bullet 417 00:21:51,330 --> 00:21:52,773 and turning it blue. 418 00:21:54,480 --> 00:21:56,850 Now, attribute selectors can be a little bit tricky. 419 00:21:56,850 --> 00:21:59,280 So if you didn't understand this at all, 420 00:21:59,280 --> 00:22:00,930 be sure to rewind in the video 421 00:22:00,930 --> 00:22:03,690 and watch that section of the video again 422 00:22:03,690 --> 00:22:06,510 just to make sure that you fully understand what's going on 423 00:22:06,510 --> 00:22:08,760 before you move on. 424 00:22:08,760 --> 00:22:11,760 The final TODO is the easiest. 425 00:22:11,760 --> 00:22:14,370 All we have to do is set all the elements 426 00:22:14,370 --> 00:22:18,030 to text-align to center. 427 00:22:18,030 --> 00:22:20,310 When we want to select all the elements, 428 00:22:20,310 --> 00:22:23,880 we use our universal selector, which is the asterisk. 429 00:22:23,880 --> 00:22:26,100 And then once we paste in this rule, 430 00:22:26,100 --> 00:22:30,510 you'll see now our preview looks exactly the same 431 00:22:30,510 --> 00:22:32,910 as what we wanted for our goal. 432 00:22:32,910 --> 00:22:34,560 Everything center aligned. 433 00:22:34,560 --> 00:22:37,821 There's lots of different styling being applied. 434 00:22:37,821 --> 00:22:40,230 And we've now managed to achieve 435 00:22:40,230 --> 00:22:44,760 all of the TODOs in our exercise. 436 00:22:44,760 --> 00:22:47,430 So hope that made sense and it helped you review 437 00:22:47,430 --> 00:22:50,010 all the things we learned in this lesson. 438 00:22:50,010 --> 00:22:52,260 Once you're ready, head over to the next lesson 439 00:22:52,260 --> 00:22:55,443 where we've got our final project for the section.