Now, in the last few lessons, we looked at why CSS is useful and how you can implement it using
inline internal or external success.
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 a to select everything.
Now we're going to replace the code that's inside your index.html with each of the debugging problems.
Now, if you've made notes in your index.html, or if you want to keep a copy of the actual working
code that you've already written, make sure that after you've selected everything inside a HTML,
go ahead and paste this into a notepad or into another file that you save as the working index.html
or give it some sort of name.
Now, after we replace this with the debugging problem, if you wanted to go back to your original index.html
you can always hit undo in Atom, and the shortcut for that is Command + Z
in Mac and its Control + Z on Windows and you can undo for as far back as you want to.
So once you've saved a copy of your original index.html and then hit Backspace to delete everything
next, you're going to go to the course resources,
and again, if you don't remember how to find that
have a look at the beginning of Lesson 3 where I talked about this now.
Inside the course resources, you'll find a section that says Download the debugging problems
Starting files.
Once you've downloaded that, you'll need to unzip that zipped folder and you should have a folder called
CSS Debugging Problems.
Now you're going to go to Atom, you're going to go to file, open, and you go to navigate to that folder
in your downloads and make sure that you haven't selected the zip version.
Select the file and then open up 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 website 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 the three dots in the top right of your Chrome browser, click on it and then
go to more tools,
you should find the developer tools over there.
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're 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 asked 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 hrRef 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 website, which we currently don't actually
have.
So we need to do to fix this bug is to delete that leading slash, hit, save and refresh our website.
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 + a 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.
Gonna 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 colour 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 are external
CSS.
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 colour?
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
webpage, 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 stylesheet, 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 six rules for the same property in different places,
which one is more important?
Well, we can use the Chrome developer tools to help us answer that question.
So I'm going to keep the body's 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 inline 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 an 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 website 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 an 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 the CSS rule from here, save and refresh, then it goes to the next most important
CSC 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 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 website 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.