1 1 00:00:00,450 --> 00:00:01,960 Hi guys and welcome back. 2 2 00:00:01,960 --> 00:00:03,010 In this video, let's take a look 3 3 00:00:03,010 --> 00:00:04,980 at the CSS selector syntax, 4 4 00:00:04,980 --> 00:00:07,510 which is how we define which elements 5 5 00:00:07,510 --> 00:00:09,210 a particular set of styles 6 6 00:00:09,210 --> 00:00:11,030 are gonna be applied to. 7 7 00:00:11,030 --> 00:00:12,710 So how can we target the elements 8 8 00:00:12,710 --> 00:00:14,930 that we want to target, and the different ways 9 9 00:00:14,930 --> 00:00:16,760 that we can do that using CSS. 10 10 00:00:16,760 --> 00:00:17,980 Let's get started. 11 11 00:00:17,980 --> 00:00:18,830 To keep things simple, 12 12 00:00:18,830 --> 00:00:20,540 we're just gonna be changing the text colour 13 13 00:00:20,540 --> 00:00:22,970 of a few elements on the page. 14 14 00:00:22,970 --> 00:00:24,890 So we're gonna be moving on to more exciting things 15 15 00:00:24,890 --> 00:00:26,440 in a little bit, but for now, 16 16 00:00:26,440 --> 00:00:29,100 let's learn about how we can target elements. 17 17 00:00:29,100 --> 00:00:31,240 So here we've got the page, 18 18 00:00:31,240 --> 00:00:33,180 and the structure of this project 19 19 00:00:33,180 --> 00:00:34,800 is the same as last lecture. 20 20 00:00:34,800 --> 00:00:38,020 We've got the index.html and the main.css file, 21 21 00:00:38,020 --> 00:00:40,300 both in the same folder and they are linked. 22 22 00:00:40,300 --> 00:00:43,510 So now I'm gonna close the sidebar so it can go away. 23 23 00:00:43,510 --> 00:00:46,050 And here we've got just a paragraph element. 24 24 00:00:46,050 --> 00:00:49,770 We've got a paragraph element with a class of red. 25 25 00:00:49,770 --> 00:00:52,820 We've got a paragraph element with an ID of orange. 26 26 00:00:52,820 --> 00:00:55,170 And we've got a paragraph element with a class of red 27 27 00:00:55,170 --> 00:00:56,920 and ID of purple. 28 28 00:00:56,920 --> 00:00:57,753 Okay. 29 29 00:00:57,753 --> 00:01:00,680 There's also a title in there as well. 30 30 00:01:00,680 --> 00:01:02,910 So now we can go over to main.css 31 31 00:01:02,910 --> 00:01:05,540 and start playing around with this. 32 32 00:01:05,540 --> 00:01:06,690 The first thing to know, 33 33 00:01:06,690 --> 00:01:08,610 and it's something that we've already looked at, 34 34 00:01:08,610 --> 00:01:11,120 is how to target elements. 35 35 00:01:11,120 --> 00:01:13,010 For example, if we want to turn 36 36 00:01:13,010 --> 00:01:16,130 all h1 elements on the page green, 37 37 00:01:16,130 --> 00:01:17,920 we could do h1 38 38 00:01:17,920 --> 00:01:19,570 and then inside the curly braces, 39 39 00:01:19,570 --> 00:01:22,880 we simply type colour is green. 40 40 00:01:22,880 --> 00:01:24,120 This is gonna change the colour 41 41 00:01:24,120 --> 00:01:27,240 of all h1 elements on the page. 42 42 00:01:27,240 --> 00:01:29,590 So if we save this and now refresh, 43 43 00:01:29,590 --> 00:01:32,350 you can see that this has turned green. 44 44 00:01:32,350 --> 00:01:33,720 So let's say that we want to make 45 45 00:01:33,720 --> 00:01:35,920 all the paragraphs green as well. 46 46 00:01:35,920 --> 00:01:38,400 We can do the paragraph tag 47 47 00:01:38,400 --> 00:01:40,660 and then colour is green. 48 48 00:01:40,660 --> 00:01:42,020 This is going to change the colour 49 49 00:01:42,020 --> 00:01:44,730 of all paragraph elements in the page to green. 50 50 00:01:44,730 --> 00:01:46,170 So if we refresh the page now, 51 51 00:01:46,170 --> 00:01:47,870 you can see they've all turned green. 52 52 00:01:47,870 --> 00:01:49,280 I'm gonna zoom in on this page a bit, 53 53 00:01:49,280 --> 00:01:50,580 because I think it's a little bit difficult 54 54 00:01:50,580 --> 00:01:51,710 to see what's going on. 55 55 00:01:51,710 --> 00:01:54,030 So that's that just so you can see it a bit better. 56 56 00:01:54,030 --> 00:01:55,800 Something important to note in CSS 57 57 00:01:55,800 --> 00:01:58,140 is that the spelling of all of these words 58 58 00:01:58,140 --> 00:01:59,800 is American English. 59 59 00:01:59,800 --> 00:02:01,700 So you might see some inconsistency 60 60 00:02:01,700 --> 00:02:03,990 with the lecture titles, since I'm in Britain, 61 61 00:02:03,990 --> 00:02:06,120 we use British English for the lecture titles, 62 62 00:02:06,120 --> 00:02:07,963 but CSS is all American English. 63 63 00:02:09,300 --> 00:02:10,650 Okay, so this is all good. 64 64 00:02:10,650 --> 00:02:12,810 But let's say that what we want 65 65 00:02:12,810 --> 00:02:15,230 and what we want this code to mean 66 66 00:02:15,230 --> 00:02:18,620 is that the h1 elements and the p elements 67 67 00:02:18,620 --> 00:02:20,400 have to have the same colour, 68 68 00:02:20,400 --> 00:02:22,810 and that colour happens to be green. 69 69 00:02:22,810 --> 00:02:25,883 Then having them as separate definitions is a bit of a pain, 70 70 00:02:25,883 --> 00:02:27,640 because if we want to change the colour, 71 71 00:02:27,640 --> 00:02:30,400 let's say that we want them both to be blue, 72 72 00:02:30,400 --> 00:02:32,500 we have to go into both lines of code 73 73 00:02:32,500 --> 00:02:33,700 and change this to blue. 74 74 00:02:33,700 --> 00:02:35,620 If we always want them to have the same colour, 75 75 00:02:35,620 --> 00:02:37,530 then there is a better way to structure this. 76 76 00:02:37,530 --> 00:02:38,730 So instead of that, 77 77 00:02:38,730 --> 00:02:42,460 we can write h1, comma, p. 78 78 00:02:42,460 --> 00:02:45,580 And that is going to target both sets of elements. 79 79 00:02:45,580 --> 00:02:48,250 So all h1 elements and all paragraph elements 80 80 00:02:48,250 --> 00:02:49,500 will be targeted. 81 81 00:02:49,500 --> 00:02:51,030 Note that when I save this file, 82 82 00:02:51,030 --> 00:02:53,170 I've got a CSS code format 83 83 00:02:53,170 --> 00:02:54,830 that sort of rewrites my code 84 84 00:02:54,830 --> 00:02:56,240 in a more readable way, 85 85 00:02:56,240 --> 00:02:58,980 and that is putting them into two different lines. 86 86 00:02:58,980 --> 00:03:01,140 That's because that is a bit more readable, 87 87 00:03:01,140 --> 00:03:03,330 but CSS doesn't care whether they're in one line 88 88 00:03:03,330 --> 00:03:05,030 or in two lines. 89 89 00:03:05,030 --> 00:03:06,200 Now, if we refresh the page, 90 90 00:03:06,200 --> 00:03:07,800 they're both still green. 91 91 00:03:07,800 --> 00:03:10,960 Instead of selecting elements by their type, 92 92 00:03:10,960 --> 00:03:12,740 it's often better to select them 93 93 00:03:12,740 --> 00:03:14,880 using classes, and classes are great 94 94 00:03:14,880 --> 00:03:16,960 because we can use them to apply 95 95 00:03:16,960 --> 00:03:19,350 similar styles to different elements. 96 96 00:03:19,350 --> 00:03:22,530 And we get to choose exactly where they apply. 97 97 00:03:22,530 --> 00:03:23,920 So if we look at our HTML code, 98 98 00:03:23,920 --> 00:03:26,130 we can see that there are two paragraphs here 99 99 00:03:26,130 --> 00:03:28,120 that have the class of red. 100 100 00:03:28,120 --> 00:03:30,870 So if we wanted these paragraphs to be red 101 101 00:03:30,870 --> 00:03:33,640 and the other paragraphs to be left unchanged, 102 102 00:03:33,640 --> 00:03:35,803 we can do that using classes. 103 103 00:03:36,920 --> 00:03:38,340 All we have to do is, 104 104 00:03:38,340 --> 00:03:39,500 I'm gonna delete all that 105 105 00:03:39,500 --> 00:03:43,490 and then put a period or a full stop, red. 106 106 00:03:43,490 --> 00:03:45,710 And that is going to target all the elements 107 107 00:03:45,710 --> 00:03:48,580 that have the red class, 108 108 00:03:48,580 --> 00:03:50,140 and we can change their styles here 109 109 00:03:50,140 --> 00:03:50,980 however we want. 110 110 00:03:50,980 --> 00:03:53,500 So I'm gonna type colour red. 111 111 00:03:53,500 --> 00:03:55,370 Note that in this video specifically, 112 112 00:03:55,370 --> 00:03:56,910 we're changing the colour of elements 113 113 00:03:56,910 --> 00:03:58,890 so it's somewhat easier to see what's going on, 114 114 00:03:58,890 --> 00:04:00,540 but the class here, 115 115 00:04:00,540 --> 00:04:01,840 as well as the element selector 116 116 00:04:01,840 --> 00:04:03,330 or any other selector that we're gonna look at 117 117 00:04:03,330 --> 00:04:05,300 in this video, is used to select 118 118 00:04:05,300 --> 00:04:07,160 which elements we're changing. 119 119 00:04:07,160 --> 00:04:09,210 We can change whatever properties we want, 120 120 00:04:09,210 --> 00:04:11,053 no matter what selector we use. 121 121 00:04:11,900 --> 00:04:14,330 So now the rest all turn black 122 122 00:04:14,330 --> 00:04:16,930 since we have no green colour anywhere, 123 123 00:04:16,930 --> 00:04:20,560 and the red class paragraphs turn red. 124 124 00:04:20,560 --> 00:04:23,170 Something important to note is that one of these paragraphs, 125 125 00:04:23,170 --> 00:04:25,340 this one down here, has some text in it, 126 126 00:04:25,340 --> 00:04:28,850 which has turned red, but it also has an em element, 127 127 00:04:28,850 --> 00:04:31,890 which is for emphasis that has also turned red. 128 128 00:04:31,890 --> 00:04:34,950 So that's interesting because we've not only changed 129 129 00:04:34,950 --> 00:04:35,940 the colour of the paragraph element, 130 130 00:04:35,940 --> 00:04:39,240 we've also changed the colour of its descendant 131 131 00:04:39,240 --> 00:04:41,560 or child elements in here. 132 132 00:04:41,560 --> 00:04:42,780 So that's an interesting thing. 133 133 00:04:42,780 --> 00:04:44,170 We're gonna learn more about that later on 134 134 00:04:44,170 --> 00:04:46,220 when we talk about inheritance. 135 135 00:04:46,220 --> 00:04:49,010 Note that if you wanted the title to be red as well, 136 136 00:04:49,010 --> 00:04:52,990 you can do h1, comma, and then the red class selector, 137 137 00:04:52,990 --> 00:04:54,720 and this is totally fine as well. 138 138 00:04:54,720 --> 00:04:55,553 You can do that. 139 139 00:04:55,553 --> 00:04:56,386 It's no problem. 140 140 00:04:56,386 --> 00:04:58,760 Let's move on to ID selectors. 141 141 00:04:58,760 --> 00:05:00,690 So here you can see in our HTML 142 142 00:05:00,690 --> 00:05:03,870 that we've got a couple of paragraphs that have IDs. 143 143 00:05:03,870 --> 00:05:05,430 One of them has the ID of orange, 144 144 00:05:05,430 --> 00:05:07,140 the other one has the ID of purple, 145 145 00:05:07,140 --> 00:05:09,930 and we can target IDs with CSS. 146 146 00:05:09,930 --> 00:05:12,620 IDs are supposed to be unique identifiers. 147 147 00:05:12,620 --> 00:05:15,250 So it's generally not a good idea to use them 148 148 00:05:15,250 --> 00:05:17,950 when styling our website with CSS, 149 149 00:05:17,950 --> 00:05:19,730 because it kind of makes it hard to reuse 150 150 00:05:19,730 --> 00:05:22,870 the CSS code for multiple different elements. 151 151 00:05:22,870 --> 00:05:26,480 Also, there're issues when it comes to specificity. 152 152 00:05:26,480 --> 00:05:29,950 The ID selector is, I guess, quite powerful. 153 153 00:05:29,950 --> 00:05:31,360 And we're gonna learn more about what I mean 154 154 00:05:31,360 --> 00:05:33,260 by that when we look at specificity. 155 155 00:05:33,260 --> 00:05:34,980 So it's normally not a good idea 156 156 00:05:34,980 --> 00:05:37,100 to use ID selectors, but nonetheless, 157 157 00:05:37,100 --> 00:05:39,630 if you wanted to use the ID selector, 158 158 00:05:39,630 --> 00:05:41,750 you just put the hash symbol there 159 159 00:05:41,750 --> 00:05:43,790 followed by the ID you want to target, 160 160 00:05:43,790 --> 00:05:45,440 and then you can change the colour 161 161 00:05:45,440 --> 00:05:46,882 to whatever you want. 162 162 00:05:46,882 --> 00:05:48,740 In here, I'm gonna change it to orange. 163 163 00:05:48,740 --> 00:05:50,830 And I'll use this opportunity to say 164 164 00:05:50,830 --> 00:05:52,230 just for the record 165 165 00:05:52,230 --> 00:05:55,160 that because we have the ID of orange 166 166 00:05:55,160 --> 00:05:56,948 doesn't mean we have to set the colour to orange. 167 167 00:05:56,948 --> 00:05:58,919 That is probably obvious to you guys, 168 168 00:05:58,919 --> 00:06:01,190 but this is just a selector 169 169 00:06:01,190 --> 00:06:03,370 which element we're targeting these other styles. 170 170 00:06:03,370 --> 00:06:07,040 They have no relationship to the selected name at all. 171 171 00:06:07,040 --> 00:06:09,760 So, you can do this and that's totally fine. 172 172 00:06:09,760 --> 00:06:12,330 So let's take a look at conflicting selectors 173 173 00:06:12,330 --> 00:06:15,660 because this is where things get a bit more interesting. 174 174 00:06:15,660 --> 00:06:16,810 Let's say that, for example, 175 175 00:06:16,810 --> 00:06:19,127 we've got the purple ID selector 176 176 00:06:19,127 --> 00:06:21,630 and we're setting something to the colour of purple. 177 177 00:06:21,630 --> 00:06:24,110 And then we've got the dot red selector 178 178 00:06:24,110 --> 00:06:25,370 for the red class, 179 179 00:06:25,370 --> 00:06:27,890 and we're setting the colour to red. 180 180 00:06:27,890 --> 00:06:30,240 Note that we have a paragraph here 181 181 00:06:30,240 --> 00:06:31,890 that has the class of red 182 182 00:06:31,890 --> 00:06:34,190 but we also have a paragraph that has the class of red 183 183 00:06:34,190 --> 00:06:35,740 and ID of purple. 184 184 00:06:35,740 --> 00:06:38,200 So here, we are in theory gonna be setting 185 185 00:06:38,200 --> 00:06:39,900 two different styles. 186 186 00:06:39,900 --> 00:06:41,570 So what's gonna happen to the text colour 187 187 00:06:41,570 --> 00:06:43,560 of this paragraph down there? 188 188 00:06:43,560 --> 00:06:45,700 What you'll find is that the text colour 189 189 00:06:45,700 --> 00:06:47,780 of this paragraph will always be purple. 190 190 00:06:47,780 --> 00:06:49,280 And this is sort of what I was mentioning 191 191 00:06:49,280 --> 00:06:52,150 a moment ago with that the ID selector 192 192 00:06:52,150 --> 00:06:53,320 is quite powerful. 193 193 00:06:53,320 --> 00:06:56,550 It overrides the class selector. 194 194 00:06:56,550 --> 00:06:58,480 So we have a presentation on the concept 195 195 00:06:58,480 --> 00:07:00,700 of specificity coming a bit later on, 196 196 00:07:00,700 --> 00:07:03,520 but just know that not all selector types are equal, 197 197 00:07:03,520 --> 00:07:06,200 some take precedence over others. 198 198 00:07:06,200 --> 00:07:08,290 One final selector that we have to talk about 199 199 00:07:08,290 --> 00:07:10,200 is the universal selector, 200 200 00:07:10,200 --> 00:07:12,930 which uses this asterisk or star symbol. 201 201 00:07:12,930 --> 00:07:15,220 This selects every element in the document 202 202 00:07:15,220 --> 00:07:16,740 and you should use this sparingly 203 203 00:07:16,740 --> 00:07:19,570 because it can cause performance issues. 204 204 00:07:19,570 --> 00:07:23,040 If we want to apply styles throughout the entire site, 205 205 00:07:23,040 --> 00:07:25,810 inheritance in CSS is often a better way 206 206 00:07:25,810 --> 00:07:28,220 of doing things rather than the universal selector. 207 207 00:07:28,220 --> 00:07:30,090 So you're not gonna use the universal selector 208 208 00:07:30,090 --> 00:07:31,480 very much at all. 209 209 00:07:31,480 --> 00:07:34,750 Note that we've already seen inheritance at work in CSS, 210 210 00:07:34,750 --> 00:07:36,240 but we're gonna learn more about it 211 211 00:07:36,240 --> 00:07:37,440 in the coming lectures. 212 212 00:07:37,440 --> 00:07:40,980 Here, when we change the colour of the em element, 213 213 00:07:40,980 --> 00:07:43,410 even though we had only targeted the paragraph elements. 214 214 00:07:43,410 --> 00:07:45,360 So that's inheritance at work right there. 215 215 00:07:45,360 --> 00:07:47,360 The colour of the child changed 216 216 00:07:47,360 --> 00:07:48,800 to match that of the parent. 217 217 00:07:48,800 --> 00:07:50,800 So we're gonna learn more about that later on. 218 218 00:07:50,800 --> 00:07:52,680 All right. Thank you guys for joining me in this video. 219 219 00:07:52,680 --> 00:07:53,830 I know it's been a bit of a long one 220 220 00:07:53,830 --> 00:07:55,690 and it's covering sort of the basics, 221 221 00:07:55,690 --> 00:07:57,450 but it's really important to understand 222 222 00:07:57,450 --> 00:07:59,720 how these selectors work and how we can target 223 223 00:07:59,720 --> 00:08:02,460 different elements so that there are no misconceptions 224 224 00:08:02,460 --> 00:08:05,310 and we don't make any mistakes with our foundations 225 225 00:08:05,310 --> 00:08:07,150 as we move on to more advanced stuff. 226 226 00:08:07,150 --> 00:08:09,050 So thanks for sticking with me for this video. 227 227 00:08:09,050 --> 00:08:10,470 I hope it's been all right. 228 228 00:08:10,470 --> 00:08:12,023 And I see you in the next one.