Original subtitles

Hey guys, welcome to another lesson where we learn more about CSS.

Now in this lesson, we're going to deep dive into "CSS Inspection" and learn about the Chrome Developer

Tools that allow us to figure out what our CSS is doing and potentially diagnose any bugs or resolve

any issues.

As I mentioned before, the Chrome Developer Tools are a really powerful suite of tools that is completely

free and comes bundled with the Chrome browser.

If you are not using a Chrome browser, you won't get access to it.

And it's really important, at least for this course, that you've got the same browser as I'm using

so that we can go through these tools together.

If you head over to this URL, which we visited before, in the last section where I showed you how CSS

works and how we can simply add CSS to make our website look beautiful, then we can use this as an

example to learn more about CSS inspection.

In order to bring up the Chrome developer tools, we go over to these three dots and then we go to more

tools and we go to developer tools.

Now you'll notice that on the right-hand side of this selection, you have the shortcut for your computer

on how you can bring it up quickly.

On a Mac.

It's usually set by default to Command, Option and I, on Windows it's normally Ctrl + Shift +

I.

So holding down those three keys together.

But if you have the function keys up here, pressing F12 usually also brings up the Chrome Developer

console.

But the shortcut could be totally different for you.

So make sure you take a look over here to figure out what your precise shortcut is.

Another way of bringing up this Developer console is simply to right-click on any element you're interested

in,

for example, this button and then click on inspect and it will do the same thing.

But in addition, it will highlight in the HTML that element that you selected.

Now what if you wanted to select a different element while you're here?

Well, you can use this button up here to select an element visually so you can click that and then

say, okay, I want to look at the footer here, this paragraph, Well, then it will select it for

you in the HTML.

Or I want to look at this h1 so you can select it visually or you can select it using the HTML.

This is the "Elements tab" and we're going to be exploring a subsection of this, which is the "Styles

section."

Notice that when I select any of these elements, it shows me the styles that have been applied to those

elements.

For example, if we take a look at this button, at least in the CSS on version, you'll see that it's

got a background-color that I've set.

I've set a color for the text and lots of other things that we don't need to worry about too much right

now because in the next lesson we're going to learn more about different CSS properties.

But the important thing is that notice if I go ahead and press that button and switch off all the CSS

and I select that button again, then you can see that most of the element style is actually all automatic.

Whenever you insert a HTML element, it comes with automatic preloaded CSS and that's what you're getting

by default, it looks something like this, but when you actually apply your own CSS, then it gets

shown here and you can even see which file it's coming from.

In this case, it's the styles.css right here and you can click on it to view the source code of that

CSS.

The next thing I want to show you is how you can actually change the CSS live in the Chrome developer

tools.

Right now you can see I've got my h1 selected and by simply clicking add, I can add (+) a style to this h1.

So I could say let's change its color instead of white to maybe black instead.

And you can see that reflected live over here.

Now I can switch that off by hovering over here and clicking on the button to put a slash through it

and it deletes that CSS.

Now, the important thing to remember is any of the changes that you make in the Chrome Developer Tool

does not affect your original file.

Previously, remember when we looked at TechCrunch using the Chrome Developer Tools and we were able to change

the text by simply typing in the Chrome Developer Tool.

This does not change Techcrunch's website and some of you have asked is this illegal?

Am I doing something bad?

No, it doesn't.

It's just you affecting your local copy that's loaded up inside the Chrome browser.

It doesn't affect any of the other users and certainly doesn't change anything on Techcrunch's servers.

Similarly, back over here, when we're editing the CSS, when we are selecting or unselecting or adding

new rules, it doesn't affect the actual website.

Even if you load up one of your local websites that you're developing and you change a whole bunch of

things, this is just temporary.

It's for you to look and try things out and

see how you like it before you add these rules into your actual CSS source code.

And you can further confirm this by seeing that I've got an h1 that says color black,

but if I go into the sources, my style.css for this file and I look in this file, you can see that

nothing has changed here.

There is no h1 that has a color of black.

Again, I recommend, don't worry too much about the different properties,

there's lots of them that's coming up that we're going to talk about,

but the main thing to focus on here is how to use the inspector to understand other peoples', as well

as, your own websites and how the CSS is laid out.

If you go ahead and inspect on one of these anchor tags.

So when you click this and hover over it, you should see an "a" tag show up,

so click on it and it'll select it in the HTML.

Now, if you look over here, you can see that it's got some default properties that have been striked-out,

and the reason for this is because when we apply a CSS rule that conflicts with some of the automatically

applied rules, such as the color of that anchor tag, remember, by default, the color of any anchor

tag is blue to start with,

but here we've got one that's white.

Well, we've overridden it simply with this line.

So if I switch this off, you can see the other one switched back on.

But if I do have my own rules, then it can override other existing rules.

So how do you know what's actually being applied to your CSS element?

Well, that's where the "Computed tab" comes in, because when you click on it, you'll see the actual

color in terms of RGB.

So how much red, green and blue is being applied to the text color and other properties as well,

and it removes all of the craziness of all this crossing-out stuff.

And you can actually see in one place what is being applied.

Now another feature of Chrome Developer Tool that I find really useful is to go over to the three dots,

go to more tools, and remember, this is the three dots for the settings of the Chrome Developer Tools,

not the one for Chrome.

This is easily confused, but when you go here and you go to more tools, you should find "CSS overview,"

and this is a neat feature where you can select "Capture overview" and it will show you a bunch of useful

things like, for example, that there are two background colors here.

There's a sort of whitish gray and there's a sort of purple going on.

There's two different text colors, white and black.

And we've also got information on the different fonts that are being used on the web page.

I find this really neat when I come across a website that I really like and I'm trying to figure out,

oh, what font is that?

Well, it seems like they're using Helvetica Neue, or what color is this green, exactly?

Well, I can actually find out simply by looking at this inspector and maybe I can copy it for my own

use later on.

So you can see the colors, you can see the fonts.

And for now, we won't worry too much about the last two

we'll come to that in later modules.

Have a play around with the CSS inspector and I want you to take a look at selecting different elements,

looking at their styles, trying to add some styles in the Chrome Developer Tools and looking around

at some of the other things we've mentioned.

Once you're happy that you know how to do that, I want you to head over to this URL,

appbrewery.github.io/css-inspection/ and I've created a website for you to inspect. In this website,

we've got some things that are on the screen and this is an h1 and h2 and a paragraph tag.

Now I want you to use the CSS inspector to answer these four quiz questions and once you've put in the

answer, click submit and you'll see if you got it right or if you got it wrong.

Pause the video and try to complete this challenge.

All right.

So the first question is, what is the named color of the body?

Well, what is the color?

So let's go ahead and pull up our inspector and let's select the body element if we haven't already

got it selected in the HTML.

And let's take a look at what styles are applied.

You can see it's got a background color that's being applied.

And if we switch it off, you can see it changes it to the default, which is white.

So this is the background color of the body and it's called "aliceblue."

If I type that in here and click submit, then I get my answer correct.

Now let's move on to the second question.

What's the font size of the h1?

Let's select the h1 right here and let's take a look at the font size that's mentioned here.

Well, it says it's 3rem, which makes it a lot bigger than the default.

So let's type 3rem in here, hit submit.

And we got that question right too. Number 3 is, what is the font weight of the h2?

Select the h2, look at the font-weight, its font-weight 500.

Okay.

And hit submit.

And finally, what's the font-family of the paragraph tag?

So let's select the paragraph tag and then look at the font-family.

And this is a little bit tricky because it's actually not applied directly to the paragraph, but it's

actually one of the automatically inherited parts.

So you can see down here it says the font-family.

And also if you go to computed where everything's all stacked up together, as I mentioned, where you

don't have to go through the entire list of what's being striked out, what's being applied, etcetera.

You can see the font family is "Arial, sans-serif."

So Arial, sans-serif. and hit submit and we get all our answers correct.

So did you manage to do that?

Did you manage to use the inspector to figure out the answers to these questions?

If not, be sure to review the previous parts of this video so that you understand exactly what's going

on before you move on to the next lesson.