Instructor: Hey guys,
welcome to another lesson where we learn more about CSS.
Now, in this lesson,
we're gonna 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
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+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 wanna look at the footer here, this paragraph."
Well, then it will select it for you in the HTML,
or I wanna 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 gonna 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 gonna 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 wanna 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, 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 are 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 styles.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 gonna talk about.
But the main thing to focus on here is
how to use the Inspector
to understand other people's 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 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 switch 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'll 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 webpage.
I find this really neat
when I come across a website that I really like
and I'm trying to figure out, "Ooh, 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 Tool,
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 three is, what is the font weight of the h2?
Select the h2, look at the font weight.
It's 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,
well, you don't have to go through the entire list
of what's being striked out,
what's being applied, et cetera.
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.