1 00:00:00,330 --> 00:00:01,163 Instructor: Hey guys, 2 00:00:01,163 --> 00:00:06,000 welcome to another lesson where we learn more about CSS. 3 00:00:06,000 --> 00:00:07,290 Now, in this lesson, 4 00:00:07,290 --> 00:00:10,980 we're gonna deep dive into CSS inspection 5 00:00:10,980 --> 00:00:13,680 and learn about the Chrome Developer Tools 6 00:00:13,680 --> 00:00:17,280 that allow us to figure out what our CSS is doing 7 00:00:17,280 --> 00:00:21,303 and potentially diagnose any bugs or resolve any issues. 8 00:00:22,650 --> 00:00:23,760 As I mentioned before, 9 00:00:23,760 --> 00:00:25,530 the Chrome Developer Tools are 10 00:00:25,530 --> 00:00:28,920 really powerful suite of tools that is completely free 11 00:00:28,920 --> 00:00:32,040 and comes bundled with the Chrome browser. 12 00:00:32,040 --> 00:00:33,930 If you are not using a Chrome browser, 13 00:00:33,930 --> 00:00:35,700 you won't get access to it. 14 00:00:35,700 --> 00:00:36,990 And it's really important, 15 00:00:36,990 --> 00:00:38,520 at least for this course, 16 00:00:38,520 --> 00:00:41,850 that you've got the same browser as I'm using 17 00:00:41,850 --> 00:00:44,610 so that we can go through these tools together. 18 00:00:44,610 --> 00:00:46,440 If you head over to this URL, 19 00:00:46,440 --> 00:00:49,410 which we visited before in the last section 20 00:00:49,410 --> 00:00:51,540 where I showed you how CSS works 21 00:00:51,540 --> 00:00:53,970 and how we can simply add CSS 22 00:00:53,970 --> 00:00:56,370 to make our website look beautiful, 23 00:00:56,370 --> 00:00:58,590 then we can use this as an example 24 00:00:58,590 --> 00:01:01,680 to learn more about CSS inspection. 25 00:01:01,680 --> 00:01:04,140 In order to bring up the Chrome Developer Tools, 26 00:01:04,140 --> 00:01:06,270 we go over to these three dots, 27 00:01:06,270 --> 00:01:08,490 and then we go to More Tools, 28 00:01:08,490 --> 00:01:10,740 and we go to Developer Tools. 29 00:01:10,740 --> 00:01:11,790 Now you'll notice 30 00:01:11,790 --> 00:01:15,810 that on the right-hand side of this selection, 31 00:01:15,810 --> 00:01:19,500 you have the shortcut for your computer 32 00:01:19,500 --> 00:01:22,200 on how you can bring it up quickly. 33 00:01:22,200 --> 00:01:27,200 On a Mac, it's usually set by default to Command+Option+I. 34 00:01:28,740 --> 00:01:33,180 On Windows, it's normally Ctrl+Shift+I. 35 00:01:33,180 --> 00:01:36,300 So holding down those three keys together. 36 00:01:36,300 --> 00:01:38,460 But if you have the Function Keys up here, 37 00:01:38,460 --> 00:01:41,100 pressing F12 usually also brings up 38 00:01:41,100 --> 00:01:42,840 the Chrome Developer Console. 39 00:01:42,840 --> 00:01:44,970 But the shortcut could be totally different for you. 40 00:01:44,970 --> 00:01:47,190 So make sure you take a look over here 41 00:01:47,190 --> 00:01:50,220 to figure out what your precise shortcut is. 42 00:01:50,220 --> 00:01:52,620 Another way of bringing up this developer console is 43 00:01:52,620 --> 00:01:55,920 simply to right-click on any element you're interested in, 44 00:01:55,920 --> 00:01:57,450 for example, this button, 45 00:01:57,450 --> 00:01:59,370 and then click on Inspect, 46 00:01:59,370 --> 00:02:00,960 and it will do the same thing, 47 00:02:00,960 --> 00:02:04,290 but in addition it will highlight in the HTML 48 00:02:04,290 --> 00:02:06,570 that element that you selected. 49 00:02:06,570 --> 00:02:09,270 Now, what if you wanted to select a different element 50 00:02:09,270 --> 00:02:10,620 while you're here? 51 00:02:10,620 --> 00:02:13,200 Well, you can use this button up here 52 00:02:13,200 --> 00:02:15,840 to select an element visually. 53 00:02:15,840 --> 00:02:17,497 So you can click that and then say, 54 00:02:17,497 --> 00:02:21,090 "Okay, I wanna look at the footer here, this paragraph." 55 00:02:21,090 --> 00:02:23,490 Well, then it will select it for you in the HTML, 56 00:02:23,490 --> 00:02:25,650 or I wanna look at this h1. 57 00:02:25,650 --> 00:02:27,270 So you can select it visually 58 00:02:27,270 --> 00:02:30,900 or you can select it using the HTML. 59 00:02:30,900 --> 00:02:32,970 This is the Elements tab. 60 00:02:32,970 --> 00:02:36,450 And we're gonna be exploring a subsection of this, 61 00:02:36,450 --> 00:02:38,940 which is the Styles section. 62 00:02:38,940 --> 00:02:42,600 Notice that when I select any of these elements, 63 00:02:42,600 --> 00:02:44,010 it shows me the styles 64 00:02:44,010 --> 00:02:46,530 that have been applied to those elements. 65 00:02:46,530 --> 00:02:49,170 For example, if we take a look at this button, 66 00:02:49,170 --> 00:02:51,900 at least in the CSS on version, 67 00:02:51,900 --> 00:02:54,510 you'll see that it's got a background color that I've set. 68 00:02:54,510 --> 00:02:56,160 I've set a color for the text 69 00:02:56,160 --> 00:02:57,690 and lots of other things 70 00:02:57,690 --> 00:02:59,850 that we don't need to worry about too much right now, 71 00:02:59,850 --> 00:03:00,930 because in the next lesson, 72 00:03:00,930 --> 00:03:04,140 we're gonna learn more about different CSS properties. 73 00:03:04,140 --> 00:03:05,850 But the important thing is that, notice, 74 00:03:05,850 --> 00:03:07,800 if I go ahead and press that button 75 00:03:07,800 --> 00:03:12,510 and switch off all the CSS and I select that button again, 76 00:03:12,510 --> 00:03:13,343 then you can see 77 00:03:13,343 --> 00:03:17,400 that most of the element style is actually all automatic. 78 00:03:17,400 --> 00:03:20,040 Whenever you insert a HTML element, 79 00:03:20,040 --> 00:03:23,670 it comes with automatic preloaded CSS. 80 00:03:23,670 --> 00:03:26,010 And that's what you're getting by default. 81 00:03:26,010 --> 00:03:27,840 It looks something like this. 82 00:03:27,840 --> 00:03:30,240 But when you actually apply your own CSS, 83 00:03:30,240 --> 00:03:32,040 then it gets shown here. 84 00:03:32,040 --> 00:03:34,650 And you can even see which file it's coming from. 85 00:03:34,650 --> 00:03:38,487 In this case, it's the styles.css right here. 86 00:03:38,487 --> 00:03:42,273 And you can click on it to view the source code of that CSS. 87 00:03:43,440 --> 00:03:45,000 The next thing I wanna show you is 88 00:03:45,000 --> 00:03:48,360 how you can actually change the CSS live 89 00:03:48,360 --> 00:03:50,370 in the Chrome Developer Tools. 90 00:03:50,370 --> 00:03:53,400 Right now you can see I've got my h1 selected, 91 00:03:53,400 --> 00:03:58,400 and by simply clicking Add, I can add a style to this h1. 92 00:03:59,190 --> 00:04:00,270 So I could say, 93 00:04:00,270 --> 00:04:04,140 let's change its color instead of white 94 00:04:04,140 --> 00:04:07,770 to maybe black instead. 95 00:04:07,770 --> 00:04:10,950 And you can see that reflected live over here. 96 00:04:10,950 --> 00:04:13,410 Now I can switch that off by hovering over here 97 00:04:13,410 --> 00:04:16,620 and clicking on the button to put a slash through it 98 00:04:16,620 --> 00:04:18,959 and it deletes that CSS. 99 00:04:18,959 --> 00:04:21,029 Now, the important thing to remember is 100 00:04:21,029 --> 00:04:23,010 any of the changes that you make 101 00:04:23,010 --> 00:04:26,520 in the Chrome Developer Tool does not affect 102 00:04:26,520 --> 00:04:28,170 your original file. 103 00:04:28,170 --> 00:04:30,930 Previously, remember, we looked at TechCrunch 104 00:04:30,930 --> 00:04:33,480 using the Chrome Developer Tools 105 00:04:33,480 --> 00:04:36,630 and we were able to change the text 106 00:04:36,630 --> 00:04:40,740 by simply typing in the Chrome Developer Tool. 107 00:04:40,740 --> 00:04:43,410 This does not change TechCrunch's website. 108 00:04:43,410 --> 00:04:45,247 And some of you have asked, 109 00:04:45,247 --> 00:04:46,590 "Is this illegal? 110 00:04:46,590 --> 00:04:47,730 Am I doing something bad?" 111 00:04:47,730 --> 00:04:48,563 No, it doesn't. 112 00:04:48,563 --> 00:04:51,510 It's just you affecting your local copy 113 00:04:51,510 --> 00:04:53,670 that's loaded up inside the Chrome browser. 114 00:04:53,670 --> 00:04:55,920 It doesn't affect any of the other users 115 00:04:55,920 --> 00:04:57,660 and certainly doesn't change anything 116 00:04:57,660 --> 00:04:59,970 on TechCrunch's servers. 117 00:04:59,970 --> 00:05:03,840 Similarly, back over here when we're editing the CSS, 118 00:05:03,840 --> 00:05:08,340 when we are selecting or unselecting or adding new rules, 119 00:05:08,340 --> 00:05:11,490 it doesn't affect the actual website. 120 00:05:11,490 --> 00:05:14,190 Even if you load up one of your local websites 121 00:05:14,190 --> 00:05:15,420 that you are developing 122 00:05:15,420 --> 00:05:17,100 and you change a whole bunch of things, 123 00:05:17,100 --> 00:05:18,360 this is just temporary. 124 00:05:18,360 --> 00:05:21,570 It's for you to look and try things out 125 00:05:21,570 --> 00:05:25,230 and see how you like it before you add these rules 126 00:05:25,230 --> 00:05:28,440 into your actual CSS source code. 127 00:05:28,440 --> 00:05:29,940 And you can further confirm this 128 00:05:29,940 --> 00:05:32,940 by seeing that I've got an h1 that says color: black, 129 00:05:32,940 --> 00:05:34,440 but if I go into the Sources, 130 00:05:34,440 --> 00:05:36,780 my styles.css for this file, 131 00:05:36,780 --> 00:05:39,420 and I look in this file, 132 00:05:39,420 --> 00:05:42,469 you can see that nothing has changed here. 133 00:05:42,469 --> 00:05:47,469 There is no h1 that has a color of black. 134 00:05:47,730 --> 00:05:48,900 Again, I recommend, 135 00:05:48,900 --> 00:05:50,880 don't worry too much about the different properties. 136 00:05:50,880 --> 00:05:52,770 There's lots of them that's coming up 137 00:05:52,770 --> 00:05:54,060 that we're gonna talk about. 138 00:05:54,060 --> 00:05:56,040 But the main thing to focus on here is 139 00:05:56,040 --> 00:05:57,780 how to use the Inspector 140 00:05:57,780 --> 00:06:01,020 to understand other people's as well as your own websites 141 00:06:01,020 --> 00:06:03,840 and how the CSS is laid out. 142 00:06:03,840 --> 00:06:08,040 If you go ahead and inspect on one of these anchor tags, 143 00:06:08,040 --> 00:06:10,020 so when you click this and hover over it, 144 00:06:10,020 --> 00:06:11,340 you should see an tag show up. 145 00:06:11,340 --> 00:06:14,730 So click on it, and it'll select it in the HTML. 146 00:06:14,730 --> 00:06:16,050 Now, if you look over here, 147 00:06:16,050 --> 00:06:19,530 you can see that it's got some default properties 148 00:06:19,530 --> 00:06:21,570 that have been striked out. 149 00:06:21,570 --> 00:06:26,570 And the reason for this is because when we apply a CSS rule, 150 00:06:26,610 --> 00:06:31,260 that conflicts with some of the automatically applied rules 151 00:06:31,260 --> 00:06:33,510 such as the color of that anchor tag. 152 00:06:33,510 --> 00:06:36,840 Remember, by default, the color of any anchor tag is blue 153 00:06:36,840 --> 00:06:37,860 to start with. 154 00:06:37,860 --> 00:06:40,020 But here we've got one that's white. 155 00:06:40,020 --> 00:06:42,750 Well, we've overridden it simply with this line. 156 00:06:42,750 --> 00:06:44,280 So if I switch this off, 157 00:06:44,280 --> 00:06:46,350 you can see the other one switch back on. 158 00:06:46,350 --> 00:06:48,510 But if I do have my own rules, 159 00:06:48,510 --> 00:06:51,660 then it can override other existing rules. 160 00:06:51,660 --> 00:06:54,240 So how do you know what's actually being applied 161 00:06:54,240 --> 00:06:56,040 to your CSS element? 162 00:06:56,040 --> 00:06:58,440 Well, that's where the Computed tab comes in, 163 00:06:58,440 --> 00:07:00,000 because when you click on it, 164 00:07:00,000 --> 00:07:03,030 you'll see the actual color in terms of RGB, 165 00:07:03,030 --> 00:07:05,880 so how much red, green, and blue is being applied 166 00:07:05,880 --> 00:07:09,810 to the text color, and other properties as well. 167 00:07:09,810 --> 00:07:12,210 And it removes all of the craziness 168 00:07:12,210 --> 00:07:14,280 of all this crossing out stuff. 169 00:07:14,280 --> 00:07:19,280 And you can actually see in one place what is being applied. 170 00:07:19,290 --> 00:07:21,870 Now, another feature of Chrome Developer Tool 171 00:07:21,870 --> 00:07:25,800 that I find really useful is to go over to the three dots, 172 00:07:25,800 --> 00:07:27,480 go to More Tools, 173 00:07:27,480 --> 00:07:29,850 and, remember, this is the three dots 174 00:07:29,850 --> 00:07:33,390 for the settings of the Chrome Developer Tools, 175 00:07:33,390 --> 00:07:35,160 not the one for Chrome. 176 00:07:35,160 --> 00:07:36,900 This is easily confused. 177 00:07:36,900 --> 00:07:38,700 But when you go here and you go to More Tools, 178 00:07:38,700 --> 00:07:41,160 you should find CSS Overview. 179 00:07:41,160 --> 00:07:42,840 And this is a neat feature 180 00:07:42,840 --> 00:07:45,930 where you can select Capture Overview, 181 00:07:45,930 --> 00:07:48,120 and it'll show you a bunch of useful things, 182 00:07:48,120 --> 00:07:48,960 like, for example, 183 00:07:48,960 --> 00:07:51,270 that there are two background colors here. 184 00:07:51,270 --> 00:07:53,220 There's a sort of whitish gray 185 00:07:53,220 --> 00:07:55,620 and there's a sort of purple going on. 186 00:07:55,620 --> 00:07:59,550 There's two different text colors, white and black. 187 00:07:59,550 --> 00:08:00,990 And we've also got information 188 00:08:00,990 --> 00:08:04,413 on the different fonts that are being used on the webpage. 189 00:08:05,250 --> 00:08:06,420 I find this really neat 190 00:08:06,420 --> 00:08:08,760 when I come across a website that I really like 191 00:08:08,760 --> 00:08:12,030 and I'm trying to figure out, "Ooh, what font is that?" 192 00:08:12,030 --> 00:08:14,880 Well, it seems like they're using Helvetica Neue. 193 00:08:14,880 --> 00:08:18,090 Or what color is this green exactly? 194 00:08:18,090 --> 00:08:19,890 Well, I can actually find out 195 00:08:19,890 --> 00:08:22,500 simply by looking at this inspector, 196 00:08:22,500 --> 00:08:25,530 and maybe I can copy it for my own use later on. 197 00:08:25,530 --> 00:08:27,930 So you can see the colors, you can see the fonts. 198 00:08:27,930 --> 00:08:31,440 And for now, we won't worry too much about the last two. 199 00:08:31,440 --> 00:08:34,620 We'll come to that in later modules. 200 00:08:34,620 --> 00:08:38,250 Have a play around with the CSS Inspector. 201 00:08:38,250 --> 00:08:39,960 And I want you to take a look 202 00:08:39,960 --> 00:08:42,270 at selecting different elements, 203 00:08:42,270 --> 00:08:44,159 looking at their styles, 204 00:08:44,159 --> 00:08:47,700 trying to add some styles in the Chrome Developer Tool, 205 00:08:47,700 --> 00:08:48,720 and looking around 206 00:08:48,720 --> 00:08:51,480 at some of the other things we've mentioned. 207 00:08:51,480 --> 00:08:54,150 Once you're happy that you know how to do that, 208 00:08:54,150 --> 00:08:56,462 I want you to head over to this URL 209 00:08:56,462 --> 00:09:01,462 appbrewery.github.io/css-inspection. 210 00:09:01,740 --> 00:09:05,160 And I've created a website for you to inspect. 211 00:09:05,160 --> 00:09:06,030 In this website, 212 00:09:06,030 --> 00:09:10,650 we've got some things that are on the screen. 213 00:09:10,650 --> 00:09:15,650 And this is an h1, and h2, and a paragraph tag. 214 00:09:16,110 --> 00:09:20,130 Now, I want you to use the CSS Inspector 215 00:09:20,130 --> 00:09:23,400 to answer these four quiz questions. 216 00:09:23,400 --> 00:09:26,040 And once you've put in the answer, click Submit, 217 00:09:26,040 --> 00:09:29,580 and you'll see if you got it right or if you got it wrong. 218 00:09:29,580 --> 00:09:32,823 Pause the video and try to complete this challenge. 219 00:09:35,040 --> 00:09:36,690 All right, so the first question is, 220 00:09:36,690 --> 00:09:40,590 what is the named color of the body? 221 00:09:40,590 --> 00:09:41,910 Well, what is the color? 222 00:09:41,910 --> 00:09:45,030 So let's go ahead and pull up our inspector, 223 00:09:45,030 --> 00:09:47,490 and let's select the body element 224 00:09:47,490 --> 00:09:50,580 if we haven't already got it selected in the HTML. 225 00:09:50,580 --> 00:09:53,640 And let's take a look at what styles are applied. 226 00:09:53,640 --> 00:09:55,770 You can see it's got a background color 227 00:09:55,770 --> 00:09:56,880 that's being applied, 228 00:09:56,880 --> 00:09:58,380 and if we switch it off, 229 00:09:58,380 --> 00:10:01,650 you can see it changes it to the default, which is white. 230 00:10:01,650 --> 00:10:03,690 So this is the background color of the body 231 00:10:03,690 --> 00:10:05,880 and it's called AliceBlue. 232 00:10:05,880 --> 00:10:09,390 If I type that in here and click Submit, 233 00:10:09,390 --> 00:10:12,240 then I get my answer correct. 234 00:10:12,240 --> 00:10:14,100 Now, let's move on to the second question. 235 00:10:14,100 --> 00:10:16,860 What's the font size of the h1? 236 00:10:16,860 --> 00:10:19,530 Let's select the h1 right here. 237 00:10:19,530 --> 00:10:22,380 And let's take a look at the font size 238 00:10:22,380 --> 00:10:23,340 that's mentioned here. 239 00:10:23,340 --> 00:10:25,650 Well, it says it's 3rem, 240 00:10:25,650 --> 00:10:28,410 which makes it a lot bigger than the default. 241 00:10:28,410 --> 00:10:33,060 So let's type 3rem in here, hit Submit, 242 00:10:33,060 --> 00:10:35,370 and we got that question right, too. 243 00:10:35,370 --> 00:10:39,690 Number three is, what is the font weight of the h2? 244 00:10:39,690 --> 00:10:42,900 Select the h2, look at the font weight. 245 00:10:42,900 --> 00:10:46,230 It's font weight 500. 246 00:10:46,230 --> 00:10:48,840 Okay, and hit Submit. 247 00:10:48,840 --> 00:10:53,840 And finally, what's the font family of the paragraph tag? 248 00:10:54,180 --> 00:10:56,370 So let's select the paragraph tag 249 00:10:56,370 --> 00:10:59,850 and then look at the font family. 250 00:10:59,850 --> 00:11:01,950 And this is a little bit tricky 251 00:11:01,950 --> 00:11:05,850 because it's actually not applied directly to the paragraph, 252 00:11:05,850 --> 00:11:10,830 but it's actually one of the automatically inherited parts. 253 00:11:10,830 --> 00:11:13,830 So you can see down here, it says the font-family. 254 00:11:13,830 --> 00:11:16,020 And also if you go to Computed 255 00:11:16,020 --> 00:11:18,480 where everything's all stacked up together, 256 00:11:18,480 --> 00:11:19,313 as I mentioned, 257 00:11:19,313 --> 00:11:21,690 well, you don't have to go through the entire list 258 00:11:21,690 --> 00:11:22,890 of what's being striked out, 259 00:11:22,890 --> 00:11:24,690 what's being applied, et cetera. 260 00:11:24,690 --> 00:11:29,310 You can see the font family is Arial, sans-serif. 261 00:11:29,310 --> 00:11:34,310 So Arial, sans-serif, and hit Submit, 262 00:11:35,100 --> 00:11:37,500 and we get all our answers correct. 263 00:11:37,500 --> 00:11:39,330 So did you manage to do that? 264 00:11:39,330 --> 00:11:41,010 Did you manage to use the Inspector 265 00:11:41,010 --> 00:11:43,320 to figure out the answers to these questions? 266 00:11:43,320 --> 00:11:46,710 If not, be sure to review the previous parts of this video 267 00:11:46,710 --> 00:11:49,230 so that you understand exactly what's going on 268 00:11:49,230 --> 00:11:51,363 before you move on to the next lesson.