WEBVTT 0 00:00.260 --> 00:05.570 Hey guys, welcome to another lesson where we learn more about CSS. 1 00:05.690 --> 00:12.950 Now in this lesson, we're going to deep dive into "CSS Inspection" and learn about the Chrome Developer 2 00:12.950 --> 00:20.300 Tools that allow us to figure out what our CSS is doing and potentially diagnose any bugs or resolve 3 00:20.300 --> 00:21.320 any issues. 4 00:22.550 --> 00:28.220 As I mentioned before, the Chrome Developer Tools are a really powerful suite of tools that is completely 5 00:28.220 --> 00:31.800 free and comes bundled with the Chrome browser. 6 00:31.820 --> 00:35.570 If you are not using a Chrome browser, you won't get access to it. 7 00:35.570 --> 00:41.780 And it's really important, at least for this course, that you've got the same browser as I'm using 8 00:41.780 --> 00:44.090 so that we can go through these tools together. 9 00:44.360 --> 00:50.960 If you head over to this URL, which we visited before, in the last section where I showed you how CSS 10 00:50.990 --> 00:57.920 works and how we can simply add CSS to make our website look beautiful, then we can use this as an 11 00:57.920 --> 01:01.160 example to learn more about CSS inspection. 12 01:01.430 --> 01:07.460 In order to bring up the Chrome Developer Tools, we go over to these three dots and then we go to More 13 01:07.460 --> 01:10.160 Tools and we go to Developer Tools. 14 01:10.400 --> 01:19.310 Now you'll notice that on the right-hand side of this selection, you have the shortcut for your computer 15 01:19.340 --> 01:21.980 on how you can bring it up quickly. 16 01:21.980 --> 01:22.810 On a Mac. 17 01:22.820 --> 01:32.780 It's usually set by default to Command + Option + I, on Windows it's normally Ctrl + Shift + 18 01:32.780 --> 01:33.050 I. 19 01:33.080 --> 01:35.810 So holding down those three keys together. 20 01:35.990 --> 01:41.840 But if you have the function keys up here, pressing F12 usually also brings up the Chrome Developer 21 01:41.840 --> 01:42.650 console. 22 01:42.650 --> 01:44.900 But the shortcut could be totally different for you. 23 01:44.900 --> 01:49.730 So make sure you take a look over here to figure out what your precise shortcut is. 24 01:50.030 --> 01:55.370 Another way of bringing up this Developer console is simply to right-click on any element you're interested 25 01:55.370 --> 01:55.730 in, 26 01:55.730 --> 02:00.740 for example, this button and then click on Inspect and it will do the same thing 27 02:00.740 --> 02:06.200 but in addition, it will highlight in the HTML that element that you selected. 28 02:06.230 --> 02:10.370 Now what if you wanted to select a different element while you're here? 29 02:10.400 --> 02:17.210 Well, you can use this button up here to select an element visually. So you can click that and then 30 02:17.240 --> 02:22.500 say, okay, I want to look at the footer here, this paragraph. Well, then it will select it for 31 02:22.500 --> 02:23.450 you in the HTML. 32 02:23.460 --> 02:30.240 Or I want to look at this h1 so you can select it visually or you can select it using the HTML. 33 02:30.810 --> 02:37.860 This is the "Elements tab" and we're going to be exploring a subsection of this, which is the "Styles 34 02:37.860 --> 02:38.700 section." 35 02:38.850 --> 02:45.570 Notice that when I select any of these elements, it shows me the styles that have been applied to those 36 02:45.570 --> 02:46.330 elements. 37 02:46.350 --> 02:52.590 For example, if we take a look at this button, at least in the "CSS On" version, you'll see that it's 38 02:52.590 --> 02:54.480 got a background-color that I've set. 39 02:54.510 --> 02:59.340 I've set a color for the text and lots of other things that we don't need to worry about too much right 40 02:59.340 --> 03:03.930 now because in the next lesson we're going to learn more about different CSS properties. 41 03:03.930 --> 03:09.990 But the important thing is that notice if I go ahead and press that button and switch off all the CSS 42 03:09.990 --> 03:17.250 and I select that button again, then you can see that most of the element style is actually all automatic. 43 03:17.250 --> 03:24.780 Whenever you insert a HTML element, it comes with automatic preloaded CSS and that's what you're getting 44 03:24.780 --> 03:31.200 by default, it looks something like this, but when you actually apply your own CSS, then it gets 45 03:31.200 --> 03:34.410 shown here and you can even see which file it's coming from, 46 03:34.410 --> 03:41.460 in this case, it's the styles.css right here. And you can click on it to view the source code of that 47 03:41.460 --> 03:42.300 CSS. 48 03:43.290 --> 03:49.350 The next thing I want to show you is how you can actually change the CSS live in the Chrome Developer 49 03:49.350 --> 03:50.070 Tools. 50 03:50.160 --> 03:59.100 Right now you can see I've got my h1 selected and by simply clicking add (+), I can add a style to this h1. 51 03:59.100 --> 04:07.710 So I could say let's change its color, instead of white to maybe black instead. 52 04:07.710 --> 04:10.610 And you can see that reflected live over here. 53 04:10.620 --> 04:16.440 Now I can switch that off by hovering over here and clicking on the button to put a slash through it 54 04:16.440 --> 04:18.660 and it deletes that CSS. 55 04:18.690 --> 04:24.720 Now, the important thing to remember is any of the changes that you make in the Chrome Developer Tool 56 04:24.750 --> 04:28.020 does not affect your original file. 57 04:28.050 --> 04:35.400 Previously, remember when we looked at TechCrunch using the Chrome Developer Tools and we were able to change 58 04:35.400 --> 04:40.050 the text by simply typing in the Chrome Developer Tool. 59 04:40.500 --> 04:46.590 This does not change Techcrunch's website and some of you have asked is this illegal? 60 04:46.620 --> 04:47.760 Am I doing something bad? 61 04:47.790 --> 04:48.360 No, it doesn't. 62 04:48.360 --> 04:53.730 It's just you affecting your local copy that's loaded up inside the Chrome browser. 63 04:53.730 --> 04:59.490 It doesn't affect any of the other users and certainly doesn't change anything on Techcrunch's servers. 64 04:59.820 --> 05:07.470 Similarly, back over here, when we're editing the CSS, when we are selecting or unselecting or adding 65 05:07.470 --> 05:11.040 new rules, it doesn't affect the actual website. 66 05:11.370 --> 05:16.560 Even if you load up one of your local websites that you're developing and you change a whole bunch of 67 05:16.560 --> 05:18.390 things, this is just temporary. 68 05:18.390 --> 05:21.630 It's for you to look and try things out and 69 05:21.860 --> 05:28.130 see how you like it before you add these rules into your actual CSS source code. 70 05:28.130 --> 05:32.720 And you can further confirm this by seeing that I've got an h1 that says color black, 71 05:32.720 --> 05:39.950 but if I go into the sources, my style.css for this file and I look in this file, you can see that 72 05:39.950 --> 05:41.810 nothing has changed here. 73 05:42.140 --> 05:47.270 There is no h1 that has a color of black. 74 05:47.600 --> 05:50.840 Again, I recommend, don't worry too much about the different properties, 75 05:50.840 --> 05:53.840 there's lots of them that's coming up that we're going to talk about, 76 05:53.840 --> 05:59.780 but the main thing to focus on here is how to use the Inspector to understand other peoples', as well 77 05:59.780 --> 06:03.080 as your own websites and how the CSS is laid out. 78 06:03.560 --> 06:07.820 If you go ahead and inspect on one of these anchor tags. 79 06:07.820 --> 06:11.240 So when you click this and hover over it, you should see an "a" tag show up, 80 06:11.240 --> 06:14.390 so click on it and it'll select it in the HTML. 81 06:14.420 --> 06:20.720 Now, if you look over here, you can see that it's got some default properties that have been striked-out, 82 06:20.720 --> 06:30.150 and the reason for this is because when we apply a CSS rule that conflicts with some of the automatically 83 06:30.150 --> 06:35.820 applied rules, such as the color of that anchor tag, remember, by default, the color of any anchor 84 06:35.820 --> 06:37.710 tag is blue to start with, 85 06:37.740 --> 06:39.810 but here we've got one that's white. 86 06:39.840 --> 06:42.690 Well, we've overridden it simply with this line. 87 06:42.690 --> 06:46.170 So if I switch this off, you can see the other one switched back on. 88 06:46.170 --> 06:51.480 But if I do have my own rules, then it can override other existing rules. 89 06:51.480 --> 06:55.860 So how do you know what's actually being applied to your CSS element? 90 06:55.890 --> 07:01.230 Well, that's where the "Computed tab" comes in, because when you click on it, you'll see the actual 91 07:01.230 --> 07:03.030 color in terms of RGB. 92 07:03.030 --> 07:09.600 So how much red, green and blue is being applied to the text color and other properties as well, 93 07:09.600 --> 07:14.190 and it removes all of the craziness of all this crossing-out stuff. 94 07:14.190 --> 07:18.780 And you can actually see in one place what is being applied. 95 07:19.140 --> 07:25.620 Now another feature of Chrome Developer Tool that I find really useful is to go over to the three dots, 96 07:25.650 --> 07:33.270 go to more tools, and remember, this is the three dots for the settings of the Chrome Developer Tools, 97 07:33.270 --> 07:35.160 not the one for Chrome. 98 07:35.160 --> 07:40.830 This is easily confused, but when you go here and you go to more tools, you should find "CSS Overview," 99 07:40.830 --> 07:47.310 and this is a neat feature where you can select "Capture overview" and it will show you a bunch of useful 100 07:47.310 --> 07:51.210 things like, for example, that there are two background colors here. 101 07:51.210 --> 07:55.410 There's a sort of whitish gray and there's a sort of purple going on. 102 07:55.440 --> 07:59.160 There's two different text colors, white and black. 103 07:59.280 --> 08:04.470 And we've also got information on the different fonts that are being used on the web page. 104 08:05.160 --> 08:10.080 I find this really neat when I come across a website that I really like and I'm trying to figure out, 105 08:10.080 --> 08:11.850 oh, what font is that? 106 08:11.880 --> 08:18.120 Well, it seems like they're using Helvetica Neue, or what color is this green, exactly? 107 08:18.120 --> 08:24.330 Well, I can actually find out simply by looking at this inspector and maybe I can copy it for my own 108 08:24.330 --> 08:25.380 use later on. 109 08:25.380 --> 08:27.840 So you can see the colors, you can see the fonts. 110 08:27.840 --> 08:31.290 And for now, we won't worry too much about the last two 111 08:31.320 --> 08:34.200 we'll come to that in later modules. 112 08:34.530 --> 08:42.180 Have a play around with the CSS Inspector and I want you to take a look at selecting different elements, 113 08:42.180 --> 08:48.780 looking at their styles, trying to add some styles in the Chrome Developer Tools and looking around 114 08:48.780 --> 08:51.030 at some of the other things we've mentioned. 115 08:51.480 --> 08:57.100 Once you're happy that you know how to do that, I want you to head over to this URL, 116 08:57.120 --> 09:06.030 appbrewery.github.io/css-inspection/ and I've created a website for you to inspect. In this website, 117 09:06.030 --> 09:15.870 we've got some things that are on the screen and this is an h1 and h2 and a paragraph tag. 118 09:15.870 --> 09:24.780 Now I want you to use the CSS inspector to answer these four quiz questions and once you've put in the 119 09:24.780 --> 09:28.950 answer, click Submit and you'll see if you got it right or if you got it wrong. 120 09:29.370 --> 09:32.940 Pause the video and try to complete this challenge. 121 09:34.940 --> 09:35.300 All right. 122 09:35.300 --> 09:40.280 So the first question is, what is the named color of the body? 123 09:40.310 --> 09:41.810 Well, what is the color? 124 09:41.810 --> 09:48.350 So let's go ahead and pull up our Inspector and let's select the body element if we haven't already 125 09:48.350 --> 09:50.330 got it selected in the HTML. 126 09:50.330 --> 09:53.380 And let's take a look at what styles are applied. 127 09:53.390 --> 09:56.810 You can see it's got a background color that's being applied. 128 09:56.810 --> 10:01.430 And if we switch it off, you can see it changes it to the default, which is white. 129 10:01.430 --> 10:05.630 So this is the background color of the body and it's called "aliceblue." 130 10:05.660 --> 10:11.720 If I type that in here and click Submit, then I get my answer correct. 131 10:11.960 --> 10:14.000 Now let's move on to the second question. 132 10:14.000 --> 10:16.580 What's the font size of the h1? 133 10:16.580 --> 10:23.300 Let's select the h1 right here and let's take a look at the font size that's mentioned here. 134 10:23.300 --> 10:28.130 Well, it says it's 3rem, which makes it a lot bigger than the default. 135 10:28.130 --> 10:32.840 So let's type 3rem in here, hit Submit. 136 10:32.840 --> 10:39.660 And we got that question right too. Number 3 is, what is the font weight of the h2? 137 10:39.690 --> 10:45.900 Select the h2, look at the font-weight, its font-weight: 500. 138 10:46.170 --> 10:46.740 Okay. 139 10:46.740 --> 10:48.180 And hit Submit. 140 10:48.600 --> 10:54.000 And finally, what's the font-family of the paragraph tag? 141 10:54.000 --> 10:59.640 So let's select the paragraph tag and then look at the font-family. 142 10:59.640 --> 11:06.240 And this is a little bit tricky because it's actually not applied directly to the paragraph, but it's 143 11:06.270 --> 11:10.680 actually one of the automatically inherited parts. 144 11:10.680 --> 11:13.710 So you can see down here it says the font-family. 145 11:13.710 --> 11:19.470 And also if you go to computed where everything's all stacked up together, as I mentioned, where you 146 11:19.470 --> 11:24.570 don't have to go through the entire list of what's being striked out, what's being applied, etcetera. 147 11:24.570 --> 11:29.310 You can see the font family is "Arial, sans-serif." 148 11:29.310 --> 11:37.560 So Arial, sans-serif, and hit Submit and we get all our answers correct. 149 11:37.560 --> 11:39.360 So did you manage to do that? 150 11:39.360 --> 11:43.200 Did you manage to use the Inspector to figure out the answers to these questions? 151 11:43.200 --> 11:48.870 If not, be sure to review the previous parts of this video so that you understand exactly what's going 152 11:48.870 --> 11:51.450 on before you move on to the next lesson.