All language subtitles for 035 How to Debug CSS Code.en_US

Now in the last few lessons we looked at why CSS is useful and how you can implement it using inline

internal or external CSS.

Now in this lesson we're going to start to develop a really important skill and that is debugging your

code. Inevitably, as a developer of any sort, web, mobile, backend, you will write code that have logical

flaws or that have typos because we are all human and we make mistakes.

And it's really important to learn the skill of diagnosing your bugs so when something doesn't work

the way you expect it to,

how can you figure out what is the cause.

And how do you go about fixing it.

And so in this lesson in the resources you'll find two text files, one called Debugging Problem 1, and

the other one called Debugging Problem 2.

And what I want you to do is to go inside your index.html and hit command A or control A

to select everything and then hit backspace to delete everything and you're going to go to Debugging

Problem 1 and you're going to hit command a or control a to select everything and then you're going to hit

command or control C and then you're going to copy all of this code over to your index.html

and then you're going to hit save and you're going to refresh your page to see that.

Oh what happened?

Where did all of our beautiful CSS styling go?

And this is your first challenge to debug and fix the code and try to figure out what's going on here.

So pause the video and give it a go.

All right so you might have found out the issue by painstakingly going through the code line by line.

Now you might have also not found the bug.

So let me walk you through a workflow of how you can approach debugging now and also in the future.

So the first thing that we're going to use is we're going to pull up the Chrome Developer Tools and

this is one of the reasons why we're using Chrome to develop our web sites and web apps even though

perhaps there are other browsers that you might prefer using on a day to day basis.

And one of the reasons is because of something called the Chrome Developer Tools.

So if you head over to View in the Chrome menu and you go over to Developer then you have this thing

called Developer Tools and if you click on it it brings up this console.

So there's a whole bunch of tabs here including Network, Performance, Sources, Elements, and we've checked

out Elements before when we right clicked on something and we said Inspect.

That's what we were bringing up.

We were bringing up the Chrome Developer Tools.

So if we head over to Console then you can see that Chrome is actually reporting an error here to you

and it's telling you that it failed to load the resource and there's an error where the file that you're

trying to pull up is not found and it tells you what file it's trying to look for. It’s trying to look

for something at

/css/styles.css.

So if we go over to our code and we look at the part where we ask the browser to load this particular

file /css/styles.css, then we will find it over here on line 6 and this shows

you the problem that I spoke about earlier whereby I said that the href or the URL location of our styles.css

exists in the css folder at the same hierarchical level as our index.html, but I've very sneakily

added this leading forward slash and that makes this link relative to the root whereas without that

leading slash it makes this link relative to the subdirectory that the index.html exists in.

So without the link we’re looking inside HTML - Personal Site for a folder called css/styles.css.

With the leading slash

we’re looking for the root of the web site which we currently don't actually have.

So all we need to do to fix this bug is to delete that leading slash, hit save and refresh our web site.

You'll see that error in the console now disappears.

And our styles are restored to our page.

So that's the solution for the first debugging problem.

Did you manage to get it right?

Now let’s move on to the second debugging problem.

So again, similarly, we’re going to hit command or control A and delete everything inside our index.html.

We’re going to go to Debugging Problem 2 and we're going to copy everything over, going to hit

save.

And we're going to refresh our website.

And again something has broken but it hasn't broken as dramatically as previously.

Now I want you to pause the video and figure out how we can restore it to the previous look and

feel

by fixing our code.

So pause the video now and give it a go.

So the first step of debugging always starts with identifying the problem.

What is the problem here?

Well, our background used to be a light green color and now it's white.

But the other parts of our CSS hasn't broken.

So for example our horizontal rule is still correctly formatted.

Our h1 and h3 are also formatted using our external CCS.

So it's probably not to do with the location of the stylesheet.

So the only issue that we need to fix is why is it that the background is white

but in our stylesheet we said that the body's background should be our light green color.

Why is that not happening?

Well, let's go ahead and pull up our Chrome Developer Tools again.

And if we look inside Elements and we select the body here and we go over to this Styles section over

here then you can see that it's showing us all of the CSS that's being applied to the body of our web page

and that includes setting the background color to white as well as setting the background color to our

specified hex code, that light green color, as well as changing the display and the margin.

And we're seeing that the color that we desire which we set inside our style sheet is being crossed out

and overridden by this white color.

And if you look carefully inside our new buggy index.html then the keen eyed amongst you might

have spotted that

I set an inline CSS rule inside the body tag to turn the body's background color to white which explains

why our page looks like this.

But what it doesn't explain is why is it that this one is being used

but this one is not.

If we specify CSS rules for the same property in different places which one is more important?

Well we can use the Chrome Developers Tools to help us answer that question.

So I'm going to keep the body background color in the inline CSS as white.

I'm also going to add a style tag here.

And inside the style tag I'm going to change the body's background color to let's say red and I'm going

to make this color a little bit more obvious so let's change this to blue, hit save and refresh our

page and you'll see that it stays white.

But now if we select this line and we select our body element, you can see that this is the Elements tab

for viewing the elements,

then you can see that there's three colors that are being applied to our body and two of them are crossed

out.

The red color which comes from index.html on line 10 which is of course our internal CSS and then

we've got the white color which is being applied on the style attribute of the actual body element as

you can see here.

And finally we've got some CSS rule being applied inside our file called styles.css on line 2.

So styles.css on line 2 is the rule where we're setting the background color to blue.

Now inside Chrome you can untick that top level background color and it goes down to the next most important

thing.

And this is the equivalent of deleting this in line CSS rule from the body tag.

And that means that it defaults to the next most important CSS rule which is the one on our index.html

on line 10.

That is our internal CSS. And if you untick that one which is the equivalent of deleting this part here

then and only then does it go to our styles.css

applying the background color to be blue.

Now remember that when you're ticking and unticking these things inside Chrome it affects how the web page

gets displayed,

but it does not change your code.

So if I hit refresh right now then it goes back to how it will be displayed across all the browsers

if this web site was live.

So the Chrome tool is only for you to mess around with it locally and see what those changes.

For example removing this line here.

Do you see how by ticking and unticking that it just commented out that particular CSS rule?

And it shows you what the effects are without affecting the code behind it.

So let's go ahead and affect the code because what we've learned is that by having inline CSS, internal

CSS, as well as external CSS all affecting the same property of the same element, the priority is given

to the inline element.

So that's what's making our background white.

Now if I delete this CSS rule from here, save and refresh, then it goes to the next most important CSS

rule which is the one inside our internal CSS over here.

And if I delete this internal CSS and hit save and refresh then and only then does it go to the next

most important rule which is our external CSS.

So this describes the hierarchy of these three different ways of implementing CSS, and what it means

is that you can apply a global CSS rule to all of your web pages,

but on the individual web pages you can apply more specific rules through using internal or inline CSS

as more or less one off changes for that specific page or that specific element on that page.

So let's restore our web site to the way that it was before and you can mess around with implementing

your CSS in those three different ways and see how the importance of those rules depend on

where you write it.

Now in terms of best practice as a web designer it's usually suggested that you implement all of your

styles inside your external CSS.

Now in the next lesson we're going to look more closely at the CSS syntax and what a CSS rule is

composed of.

So for all of that and more I'll see you on the next lesson.