WEBVTT 0 00:00.470 --> 00:01.070 Hi guys. 1 00:01.070 --> 00:04.280 Welcome to another lesson on CSS. 2 00:04.310 --> 00:11.570 In this lesson, we're going to be talking about CSS selectors, and this is going to help us choose 3 00:11.570 --> 00:14.150 where to apply our CSS. 4 00:14.480 --> 00:21.220 We've seen previously that we can create CSS rules by simply specifying two things. 5 00:21.230 --> 00:31.400 One is the property we want to change and after a colon we get to specify the value to change that property 6 00:31.400 --> 00:31.990 to. 7 00:32.210 --> 00:38.900 In this case, what we're saying is we want to change the text color into a blue color. 8 00:39.320 --> 00:45.110 Now we've come across some of these rules already and I'll be showing you in a later lesson in the next 9 00:45.110 --> 00:48.230 section how to find out more about these rules, 10 00:48.230 --> 00:54.680 but more importantly, in this lesson, what I want to talk about is the part outside of these rules. 11 00:54.680 --> 00:57.860 It's the part that comes right here. 12 00:57.860 --> 01:02.280 And this is known as a CSS selector. 13 01:02.550 --> 01:04.770 What is a CSS selector? 14 01:04.770 --> 01:14.190 Well, it's the part that selects the HTML in order to apply whichever rules go in between these curly 15 01:14.190 --> 01:15.120 braces. 16 01:15.330 --> 01:20.910 How do we know which part of our HTML file to make the text color blue? 17 01:20.940 --> 01:25.650 Well, we look at this part and we can see we're targeting the h1. 18 01:25.740 --> 01:30.750 Now, this style of selector is one of the simplest CSS selectors, 19 01:30.780 --> 01:32.640 it's called an "element selector", 20 01:32.640 --> 01:38.070 and all it does is it selects a particular HTML tag. 21 01:38.070 --> 01:42.000 So in this case it's targeting all h1's. 22 01:42.000 --> 01:49.710 If your HTML is any good, you should only have a single h1, but it will be different for other tags. 23 01:49.710 --> 01:57.150 If you had anchor tags or if you had paragraph tags or h2's or any of the other HTML tags, 24 01:57.150 --> 02:07.430 then when you select each of these in your CSS, it means apply to all elements that have that particular 25 02:07.430 --> 02:08.240 tag. 26 02:08.360 --> 02:12.260 Let's see this in action. Here, 27 02:12.260 --> 02:13.910 I've got two files, 28 02:13.910 --> 02:18.890 one is the index.html, and another is our stylesheet. 29 02:18.980 --> 02:26.450 And inside our index.html we've just got 3 h2's: red, green and blue, 30 02:26.450 --> 02:30.140 and when displayed or run they will look like this. 31 02:30.140 --> 02:31.520 Three headings. 32 02:31.520 --> 02:40.640 Now if we go ahead and add a little bit of CSS and target our h2 element, in this case, we're using 33 02:40.640 --> 02:45.260 an element selector which is simply the name of the tag, 34 02:45.260 --> 02:50.870 and then after the curly braces, we can define whichever CSS rules we want. 35 02:50.900 --> 02:54.590 In this case, turning the color of the text red. 36 02:54.680 --> 03:00.230 If we go ahead and run this code, I want you to imagine what you expect to happen. 37 03:00.230 --> 03:03.010 Which of these texts will turn red? 38 03:03.030 --> 03:04.950 So let's go and run the code. 39 03:04.950 --> 03:10.920 And once this change is incorporated, this is what we see Red, Green and Blue all turn red because 40 03:10.920 --> 03:13.020 they are all h2's. 41 03:13.020 --> 03:18.750 And this element selector here selects all of the h2's turning them red. 42 03:18.750 --> 03:20.670 So pretty simple so far. 43 03:20.790 --> 03:25.710 Now let's look at another type of selector, a "class selector". 44 03:25.770 --> 03:30.540 This requires a special symbol, which is the dot (.), 45 03:30.570 --> 03:39.750 and then after that dot immediately with no spaces right here, then you have the name of the class. 46 03:39.750 --> 03:45.150 So this is the actual name of the class that we're selecting. 47 03:45.150 --> 03:47.670 In this case, I've called it red-heading. 48 03:47.790 --> 03:52.890 And then after the curly braces again, we have the same CSS rule to apply, 49 03:52.920 --> 03:55.050 change the text color to red. 50 03:55.830 --> 03:58.230 Now, what is a class? 51 03:58.230 --> 04:05.490 Well, a class is something that we can add as an attribute to any HTML element. 52 04:05.880 --> 04:14.130 And this attribute is kind of like saying, well, let's group these particular elements into a class. 53 04:14.130 --> 04:21.780 So it's used for grouping elements in your HTML file to apply the same CSS rule to all of them. 54 04:21.780 --> 04:29.910 So in this case, we've only got one h2 that has a class and the class is set to "red-text." 55 04:30.090 --> 04:39.390 Now, when I go ahead and write some CSS and I target the class, which remember requires the dot and 56 04:39.390 --> 04:45.420 then the name of the class, which is this, and it has to be spelled exactly the same. 57 04:45.420 --> 04:47.760 These two cannot have any differences. 58 04:47.760 --> 04:53.970 So you can't have, for example, a capital R or a capital T, this will not work. 59 04:54.510 --> 04:59.820 Instead, what we have is our class selector and our CSS rule. 60 05:00.460 --> 05:07.900 What do you expect will happen when the code is run in the browser? When this CSS gets applied? 61 05:07.930 --> 05:10.360 Well, it'll look like this. 62 05:10.390 --> 05:16.990 It selects the only element that has that class and turns the text color red. 63 05:17.470 --> 05:22.330 Now what if we had multiple elements with the same class? 64 05:22.330 --> 05:27.640 So here you can see we've actually got two different types of HTML elements. 65 05:27.670 --> 05:32.800 One is an h2 and another is a paragraph element. 66 05:32.920 --> 05:38.470 Even though these two are completely different elements, we can tag them using the same class. 67 05:38.470 --> 05:43.900 We're saying the h2 should have the class of "red-text," as should the paragraph. 68 05:44.020 --> 05:54.070 Now if we write our CSS and we select again all the classes that have "red-text", then what do you think 69 05:54.070 --> 05:55.110 will happen? 70 05:55.120 --> 06:01.850 Well, in this case, it doesn't matter if it's an h2 or if it's a paragraph, 71 06:01.850 --> 06:08.870 as long as they've got that class, they've been converted into red text and the style has been applied 72 06:08.870 --> 06:11.900 to these two HTML elements. 73 06:12.380 --> 06:16.520 As you can see, the class selector is really versatile, 74 06:16.520 --> 06:22.430 it allows you to group different parts of your HTML file into having the same styling. 75 06:22.430 --> 06:28.010 And this can be really, really useful on multi-page websites with lots of different elements, 76 06:28.010 --> 06:32.840 and you don't just want to select a particular type of HTML element. 77 06:33.650 --> 06:39.800 The next one I want to show you is called the "ID Selector" and the ID Selector, 78 06:39.800 --> 06:47.300 it has its own special symbol, which is a pound sign or a hashtag (#), and you put that pound sign and 79 06:47.300 --> 06:57.320 again, no spaces in between the pound sign and the actual name of the ID, and this selects all elements 80 06:57.320 --> 07:00.590 with a particular ID attribute. 81 07:00.590 --> 07:07.190 This is what an ID attribute looks like, it's simply the words "id", and then after the equal sign, 82 07:07.190 --> 07:14.870 we can give it a particular ID. And it works similarly to the class selector, because if I go ahead 83 07:14.870 --> 07:24.770 and select this ID of main and I apply these CSS changes, then you can see it will add the styling and 84 07:24.770 --> 07:28.520 apply it to the only element that has that ID. 85 07:29.120 --> 07:35.160 So then what is the difference between the ID and the class selector? 86 07:35.180 --> 07:44.390 Well, the class selector can be applied to many elements, whereas the ID should be only applied to 87 07:44.390 --> 07:52.220 one element in a single HTML file. In a single HTML file like our index.html, 88 07:52.250 --> 07:58.490 there should only be one ID of this particular name, main. 89 07:58.490 --> 08:04.090 It should be completely unique and this is the difference. 90 08:04.090 --> 08:13.840 If you had say three h2's you can't select all of them using the element selector like this because 91 08:13.840 --> 08:17.530 that would select all of the h2's. 92 08:17.560 --> 08:27.610 Instead you apply the ID to the unique element that you want to apply your style to and it selects it 93 08:27.610 --> 08:29.590 in the HTML file. 94 08:30.310 --> 08:38.530 Again, remember, IDs are unique only one element per file and classes, you can put on as many elements 95 08:38.530 --> 08:40.690 as you like to group them together. 96 08:41.440 --> 08:49.060 Another way that you can select parts of your HTML is using the attribute selector so we know that we 97 08:49.060 --> 08:54.850 can create a HTML tag and add as many attributes as we like. 98 08:54.850 --> 09:09.670 So we had attributes such as ID, or class, or draggable, or src for the images or href for the anchor 99 09:09.670 --> 09:17.110 tags or alt for the images and a whole bunch more that will get to see in the future as well. 100 09:17.380 --> 09:26.020 Now we can select these elements that have particular attributes or particular attributes values by 101 09:26.020 --> 09:27.910 using this notation. 102 09:27.940 --> 09:39.010 Notice the first part here is the HTML element that you want to select, and then using a set of square 103 09:39.010 --> 09:41.380 brackets [ ], these ones right here, 104 09:41.410 --> 09:46.390 then inside we can include the attribute that you want to select. 105 09:46.630 --> 09:57.640 What this entire selector says is select all paragraph elements with the attribute draggable and then 106 09:57.640 --> 09:59.680 apply this CSS style 107 09:59.820 --> 10:00.270 to it. 108 10:00.750 --> 10:03.860 What does this look like in HTML code? 109 10:03.870 --> 10:10.680 Well, here we've got three paragraph tags, but only one of them has the attribute draggable set to 110 10:10.710 --> 10:11.370 true. 111 10:11.490 --> 10:21.780 If we go ahead and apply the CSS style where we select the paragraph element with the draggable attribute 112 10:21.780 --> 10:31.020 and give it this CSS style, then when this CSS is applied to our HTML, this is what will happen. 113 10:31.020 --> 10:37.260 It will find the unique paragraph tag with that particular attribute. 114 10:37.290 --> 10:41.130 Now, you can go one step further with attribute selectors. 115 10:41.310 --> 10:47.980 You can actually select the value of the attribute that you want to apply your CSS to. 116 10:48.000 --> 10:54.840 So in this case, you can see we've got all three paragraphs with the same attribute. 117 10:54.870 --> 10:59.070 All the draggable attributes are set, but the set to different values. 118 10:59.170 --> 11:03.320 So the first one is set to true, and the other two are set to false. 119 11:03.340 --> 11:07.670 So now we can actually write our CSS like this. 120 11:07.690 --> 11:16.470 We can select all the paragraph elements which has an attribute of draggable set an equal to false. 121 11:16.480 --> 11:25.330 And what this selector is going to do all of this is it's going to look inside our file and it's going 122 11:25.330 --> 11:35.590 to find these two paragraph elements in order to select and apply the CSS. When this CSS is applied instead 123 11:35.590 --> 11:43.540 of the first one, which previously was selected, we actually have the other two selected and turned 124 11:43.540 --> 11:44.290 red. 125 11:44.620 --> 11:51.250 This is again a really versatile way of applying CSS, but as you can see, it selects on different 126 11:51.250 --> 11:53.460 things than what we've seen before. 127 11:53.470 --> 11:58.990 The element, the ID, or the class selectors. The final selector 128 11:58.990 --> 12:01.960 I want to talk about is the universal selector. 129 12:01.960 --> 12:03.580 And it's really simple. 130 12:03.580 --> 12:05.470 It's just an asterix (*). 131 12:05.470 --> 12:08.740 And after the Asterix you have your CSS rules, 132 12:08.740 --> 12:12.460 but what this means is it means select all. 133 12:12.910 --> 12:19.240 And when you apply this, it doesn't matter what class you've got, what ID, what attribute set, which 134 12:19.240 --> 12:20.320 different elements, 135 12:20.350 --> 12:27.610 if you select all, it's going to apply the style to everything where the stylesheet is active. 136 12:27.610 --> 12:31.540 And this is probably one of the simplest selectors to understand. 137 12:31.900 --> 12:38.530 So now that we've seen all the different ways that we can apply our CSS to different parts of the HTML 138 12:38.560 --> 12:46.000 using selectors, let's try an exercise where we experiment hands on and see if you've understood all 139 12:46.000 --> 12:47.830 the concepts in this lesson. 140 12:48.130 --> 12:55.600 Now, once you've downloaded and extracted the starting files and have it open in VS Code, then I want 141 12:55.600 --> 13:02.350 you to go into the index.html file and here you'll notice a couple of things. 142 13:02.350 --> 13:09.400 Firstly, we've already set up the stylesheet for you, so we've got an external stylesheet set up using 143 13:09.400 --> 13:14.590 a link, and it's pointing to this file right here, the style.css. 144 13:15.100 --> 13:22.240 The part that we want you to do is to revise what you've learned about CSS selectors. 145 13:22.240 --> 13:26.830 And I've set up five TODO's for you and I want you to do them in order. 146 13:26.830 --> 13:31.120 So start from one and then go to two and continue downwards. 147 13:31.390 --> 13:37.000 What this is going to involve is for you to write actual CSS code. 148 13:37.030 --> 13:44.650 I don't want you to actually touch anything inside the index.html because I don't want you to change 149 13:44.650 --> 13:48.970 any of the HTML with the classes or values or IDs, 150 13:48.970 --> 13:51.340 I want you to leave it exactly as it is. 151 13:51.370 --> 13:57.280 And instead, your job is to write the selectors in the style.css. 152 13:57.430 --> 14:04.660 Notice when you open up the style.css there's a little bit of CSS already here for you and I want you 153 14:04.660 --> 14:05.770 to leave this alone. 154 14:05.800 --> 14:07.540 Don't touch it, don't change it. 155 14:07.540 --> 14:13.780 It's important so that the final styling looks right when we haven't covered all of the different CSS 156 14:13.780 --> 14:15.160 styling rules. 157 14:15.160 --> 14:19.180 In the next section, we're going to be talking about all of this in a lot more detail, 158 14:19.180 --> 14:22.480 where to find out about different rules and how to use them, 159 14:22.480 --> 14:27.640 but for now, I want you to ignore this part and write your CSS below. 160 14:28.240 --> 14:34.780 Similarly, I'm not expecting you to know which CSS rules to use because I'll provide all the rules 161 14:34.780 --> 14:36.730 for you in TODO 1, 162 14:36.730 --> 14:42.640 I want you to change the text color to red. In TODO 2, I want you to change the font size or change 163 14:42.640 --> 14:48.220 the text align and this is all going to be provided for you completely formatted. 164 14:48.220 --> 14:53.590 So it's got the property, the colon and the value I want you to set it to. 165 14:53.620 --> 14:59.710 Now, the part that you need to think about and where your challenge comes in is how to select 166 14:59.940 --> 15:01.080 the correct parts. 167 15:01.080 --> 15:07.860 So how to select all the paragraphs, for example, or how to select parts with a class of this or an 168 15:07.860 --> 15:09.240 ID of this? 169 15:09.240 --> 15:10.620 So that is the challenge. 170 15:10.620 --> 15:14.040 And this is what you need to do in this exercise. 171 15:14.490 --> 15:21.540 And if you take a look at the preview right now, it's very plain, all black, no styling at all, 172 15:21.570 --> 15:27.630 but if you take a look at the goal.png, you'll see this is what the final outcome will look like. 173 15:27.630 --> 15:33.330 It's going to be centered, it's going to have different colors and you can almost even use this website 174 15:33.330 --> 15:42.720 as a revision tool because each of the bullet points are linked to a particular style of CSS selection. 175 15:43.020 --> 15:50.820 This hopefully will be quite a fun challenge for you and if you get stuck, be sure to rewind a little 176 15:50.850 --> 15:56.280 bit in the video to see how to do the different things as seen in the previous examples. 177 15:56.280 --> 16:01.750 And I want you to really give it a good go before you continue and watch the solution. 178 16:02.410 --> 16:03.460 Pause the video now. 179 16:03.460 --> 16:04.450 Give this a go. 180 16:09.440 --> 16:09.860 All right. 181 16:09.860 --> 16:14.210 So the first thing we're going to do is we're going to pull up our preview to make sure we are doing 182 16:14.210 --> 16:15.470 the right things. 183 16:15.470 --> 16:23.660 And to begin the first TODO is to set the CSS for all paragraph tags to this color. 184 16:23.660 --> 16:29.750 Now, remember, I said we're not writing any code or changing anything in the HTML side, 185 16:29.750 --> 16:37.730 we're doing it all in our CSS, but it's still really important that we look at what's in our HTML code 186 16:37.730 --> 16:41.030 in order to complete each of the steps of the challenge. 187 16:41.180 --> 16:42.350 The first one's easy, 188 16:42.350 --> 16:47.180 we're going to target all paragraph tags and we're going to apply this CSS style. 189 16:47.180 --> 16:54.140 So let me copy the CSS style, paste it in, and now I've got an error because I haven't selected what 190 16:54.140 --> 16:56.030 this style should be applied to. 191 16:56.240 --> 17:01.790 In this case, we're applying it to all the paragraph elements, so we're using the element selector 192 17:01.790 --> 17:09.150 and all we have to do there is simply add the name of the tag and then apply it and you can see the 193 17:09.150 --> 17:12.750 first line of our bullet is now red. 194 17:13.170 --> 17:15.030 That's TODO number one. 195 17:15.030 --> 17:15.570 Done. 196 17:15.570 --> 17:17.910 Let's move on to the next TODO so. 197 17:17.910 --> 17:26.430 In this one, we want to set the CSS for all the elements with a class of this to this CSS rule. 198 17:26.430 --> 17:30.960 So let me again copy the CSS rule and then paste it below, 199 17:31.140 --> 17:37.020 and now we're going to use a class selector and select all the elements. 200 17:37.020 --> 17:42.270 So notice how we've got many elements with the same class, even though they're applied to different 201 17:42.270 --> 17:46.680 elements, but we can select across them using the class selector. 202 17:46.950 --> 17:52.530 The class selector, if you remember, requires the dot, and then immediately afterwards we add in 203 17:52.530 --> 17:58.350 the name of the class, and then we enclose our CSS rule in between the curly braces again. 204 17:58.350 --> 18:06.570 And what this has done is it's applied a larger font size to all of the HTML elements that have that 205 18:06.570 --> 18:11.970 class applied to them, which is all the bullets here, but not the h1 or h2's. 206 18:12.390 --> 18:14.610 So that's TODO number two done. 207 18:14.640 --> 18:22.890 Next one is to set the CSS for the element with a particular unique ID and the ID is this one. 208 18:22.890 --> 18:24.450 So which one has that ID? 209 18:24.690 --> 18:31.710 It's this particular list element and we're going to set it to have a CSS rule to turn the color green. 210 18:33.660 --> 18:37.530 With ID names or class names or attribute names, any of that, 211 18:37.530 --> 18:41.340 it's very important that you don't make any spelling errors. 212 18:41.340 --> 18:48.090 What I normally do is I normally just copy it and then paste it in so that I don't actually mistakenly 213 18:48.090 --> 18:52.470 add a capitalized S or something else that I could write incorrectly. 214 18:52.470 --> 18:57.270 So remember, the ID selector is a pound sign or a hashtag, 215 18:57.270 --> 19:05.490 And once we enclose our rule inside that selector, you'll see bullet number three turn green, because 216 19:05.490 --> 19:11.610 that is the only item and it should be only one item that has the same ID. 217 19:12.690 --> 19:21.480 Now let's move on to TODO number four, which is to set the CSS for the "li" elements that have the value 218 19:21.480 --> 19:23.520 attribute set to 4. 219 19:23.760 --> 19:32.610 And notice now that all of the items in the ordered list, I've set a value attribute. 220 19:32.610 --> 19:42.210 And what this does, if you take a look at the MDN Web docs for the list item element is this attribute 221 19:42.210 --> 19:46.290 can indicate the current ordinal value of the list item. 222 19:46.290 --> 19:56.640 When you have a list item inside an ordered list, by default, it starts numbering from 1 like so, this 223 19:56.640 --> 19:58.410 is this list item. 224 19:58.410 --> 20:04.560 But because I've got that paragraph tag above and I want to format this so that we have an interesting 225 20:04.560 --> 20:14.700 CSS exercise, I've set the value attribute so that the list starts from 2, which is totally valid 226 20:14.700 --> 20:20.100 and I've set it for all of the other items as well so that we continue the list. 227 20:21.420 --> 20:28.260 In this case, we're going to use the attribute selector to select this value attribute and turn the 228 20:28.260 --> 20:29.520 text blue. 229 20:29.610 --> 20:36.120 Let's paste in the CSS rule and then remember, the way that we use the attribute inspector is we first 230 20:36.120 --> 20:42.420 select the element in this case list item, and then we add some square brackets, 231 20:42.420 --> 20:48.540 and inside the square brackets, we add the attribute that we want to select, which in this case is called 232 20:48.540 --> 20:49.410 value. 233 20:49.410 --> 20:57.150 And if right now I already close these curly braces, so we select on that attribute, it's going to turn 234 20:57.150 --> 21:05.160 all the list items that have a attribute of value set, which is basically all four of these. 235 21:05.190 --> 21:08.550 Now, some of you might have noticed that bullet Number 3 236 21:08.610 --> 21:13.470 remain green instead of turning blue like the rest of the list elements. 237 21:13.500 --> 21:19.650 Now, if you're curious about why this is, this is to do with something called "CSS Specificity" relating 238 21:19.680 --> 21:22.380 to how specific the rule is. 239 21:22.410 --> 21:28.560 Now, we're going to be covering this in Section 7 for our Advanced CSS module. 240 21:28.560 --> 21:32.070 So that's something you get to look forward to in the future. 241 21:32.700 --> 21:39.930 Now, if we want to set the attribute that we want to select to a particular value, which in this case 242 21:39.930 --> 21:47.100 is the one that's 4, then I have to go a little bit further and set this equal to 4. 243 21:47.280 --> 21:52.830 And now you can see it's only selecting this fourth bullet and turning it blue. 244 21:54.380 --> 21:56.780 Now attribute selectors can be a little bit tricky. 245 21:56.780 --> 22:02.450 So if you didn't understand this at all, be sure to rewind in the video and watch that section of the 246 22:02.450 --> 22:08.000 video again, just to make sure that you fully understand what's going on before you move on. 247 22:08.540 --> 22:11.510 The final TODO is the easiest. 248 22:11.540 --> 22:17.480 All we have to do is set all the elements to "text-align" to center. 249 22:17.810 --> 22:23.570 When we want to select all the elements, we use our universal selector, which is the asterisks (*), 250 22:23.570 --> 22:31.490 and then once we paste in this rule, you'll see now our preview looks exactly the same as what we wanted 251 22:31.490 --> 22:34.370 for our goal. Everything center aligned. 252 22:34.400 --> 22:41.690 There's lots of different styling being applied and we've now managed to achieve all of the TODO's 253 22:41.690 --> 22:44.030 in our exercise. 254 22:44.450 --> 22:45.830 So hope that made sense 255 22:45.830 --> 22:49.680 and it helped you review all the things we learned in this lesson. 256 22:49.700 --> 22:55.590 Once you're ready, head over to the next lesson where we've got our final project for the section.