Now in the last few lessons we looked at why CSS is useful and how you can implement it using inline 1
internal or external CSS. 2
Now in this lesson we're going to start to develop a really important skill and that is debugging your 3
code. Inevitably, as a developer of any sort, web, mobile, backend, you will write code that have logical 4
flaws or that have typos because we are all human and we make mistakes. 5
And it's really important to learn the skill of diagnosing your bugs so when something doesn't work 6
the way you expect it to, 7
how can you figure out what is the cause. 8
And how do you go about fixing it. 9
And so in this lesson in the resources you'll find two text files, one called Debugging Problem 1, and 10
the other one called Debugging Problem 2. 11
And what I want you to do is to go inside your index.html and hit command A or control A 12
to select everything and then hit backspace to delete everything and you're going to go to Debugging 13
Problem 1 and you're going to hit command a or control a to select everything and then you're going to hit 14
command or control C and then you're going to copy all of this code over to your index.html 15
and then you're going to hit save and you're going to refresh your page to see that. 16
Oh what happened? 17
Where did all of our beautiful CSS styling go? 18
And this is your first challenge to debug and fix the code and try to figure out what's going on here. 19
So pause the video and give it a go. 20
All right so you might have found out the issue by painstakingly going through the code line by line. 21
Now you might have also not found the bug. 22
So let me walk you through a workflow of how you can approach debugging now and also in the future. 23
So the first thing that we're going to use is we're going to pull up the Chrome Developer Tools and 24
this is one of the reasons why we're using Chrome to develop our web sites and web apps even though 25
perhaps there are other browsers that you might prefer using on a day to day basis. 26
And one of the reasons is because of something called the Chrome Developer Tools. 27
So if you head over to View in the Chrome menu and you go over to Developer then you have this thing 28
called Developer Tools and if you click on it it brings up this console. 29
So there's a whole bunch of tabs here including Network, Performance, Sources, Elements, and we've checked 30
out Elements before when we right clicked on something and we said Inspect. 31
That's what we were bringing up. 32
We were bringing up the Chrome Developer Tools. 33
So if we head over to Console then you can see that Chrome is actually reporting an error here to you 34
and it's telling you that it failed to load the resource and there's an error where the file that you're 35
trying to pull up is not found and it tells you what file it's trying to look for. It’s trying to look 36
for something at 37
/css/styles.css. 38
So if we go over to our code and we look at the part where we ask the browser to load this particular 39
file /css/styles.css, then we will find it over here on line 6 and this shows 40
you the problem that I spoke about earlier whereby I said that the href or the URL location of our styles.css 41
exists in the css folder at the same hierarchical level as our index.html, but I've very sneakily 42
added this leading forward slash and that makes this link relative to the root whereas without that 43
leading slash it makes this link relative to the subdirectory that the index.html exists in. 44
So without the link we’re looking inside HTML - Personal Site for a folder called css/styles.css. 45
With the leading slash 46
we’re looking for the root of the web site which we currently don't actually have. 47
So all we need to do to fix this bug is to delete that leading slash, hit save and refresh our web site. 48
You'll see that error in the console now disappears. 49
And our styles are restored to our page. 50
So that's the solution for the first debugging problem. 51
Did you manage to get it right? 52
Now let’s move on to the second debugging problem. 53
So again, similarly, we’re going to hit command or control A and delete everything inside our index.html. 54
We’re going to go to Debugging Problem 2 and we're going to copy everything over, going to hit 55
save. 56
And we're going to refresh our website. 57
And again something has broken but it hasn't broken as dramatically as previously. 58
Now I want you to pause the video and figure out how we can restore it to the previous look and 59
feel 60
by fixing our code. 61
So pause the video now and give it a go. 62
So the first step of debugging always starts with identifying the problem. 63
What is the problem here? 64
Well, our background used to be a light green color and now it's white. 65
But the other parts of our CSS hasn't broken. 66
So for example our horizontal rule is still correctly formatted. 67
Our h1 and h3 are also formatted using our external CCS. 68
So it's probably not to do with the location of the stylesheet. 69
So the only issue that we need to fix is why is it that the background is white 70
but in our stylesheet we said that the body's background should be our light green color. 71
Why is that not happening? 72
Well, let's go ahead and pull up our Chrome Developer Tools again. 73
And if we look inside Elements and we select the body here and we go over to this Styles section over 74
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 75
and that includes setting the background color to white as well as setting the background color to our 76
specified hex code, that light green color, as well as changing the display and the margin. 77
And we're seeing that the color that we desire which we set inside our style sheet is being crossed out 78
and overridden by this white color. 79
And if you look carefully inside our new buggy index.html then the keen eyed amongst you might 80
have spotted that 81
I set an inline CSS rule inside the body tag to turn the body's background color to white which explains 82
why our page looks like this. 83
But what it doesn't explain is why is it that this one is being used 84
but this one is not. 85
If we specify CSS rules for the same property in different places which one is more important? 86
Well we can use the Chrome Developers Tools to help us answer that question. 87
So I'm going to keep the body background color in the inline CSS as white. 88
I'm also going to add a style tag here. 89
And inside the style tag I'm going to change the body's background color to let's say red and I'm going 90
to make this color a little bit more obvious so let's change this to blue, hit save and refresh our 91
page and you'll see that it stays white. 92
But now if we select this line and we select our body element, you can see that this is the Elements tab 93
for viewing the elements, 94
then you can see that there's three colors that are being applied to our body and two of them are crossed 95
out. 96
The red color which comes from index.html on line 10 which is of course our internal CSS and then 97
we've got the white color which is being applied on the style attribute of the actual body element as 98
you can see here. 99
And finally we've got some CSS rule being applied inside our file called styles.css on line 2. 100
So styles.css on line 2 is the rule where we're setting the background color to blue. 101
Now inside Chrome you can untick that top level background color and it goes down to the next most important 102
thing. 103
And this is the equivalent of deleting this in line CSS rule from the body tag. 104
And that means that it defaults to the next most important CSS rule which is the one on our index.html 105
on line 10. 106
That is our internal CSS. And if you untick that one which is the equivalent of deleting this part here 107
then and only then does it go to our styles.css 108
applying the background color to be blue. 109
Now remember that when you're ticking and unticking these things inside Chrome it affects how the web page 110
gets displayed, 111
but it does not change your code. 112
So if I hit refresh right now then it goes back to how it will be displayed across all the browsers 113
if this web site was live. 114
So the Chrome tool is only for you to mess around with it locally and see what those changes. 115
For example removing this line here. 116
Do you see how by ticking and unticking that it just commented out that particular CSS rule? 117
And it shows you what the effects are without affecting the code behind it. 118
So let's go ahead and affect the code because what we've learned is that by having inline CSS, internal 119
CSS, as well as external CSS all affecting the same property of the same element, the priority is given 120
to the inline element. 121
So that's what's making our background white. 122
Now if I delete this CSS rule from here, save and refresh, then it goes to the next most important CSS 123
rule which is the one inside our internal CSS over here. 124
And if I delete this internal CSS and hit save and refresh then and only then does it go to the next 125
most important rule which is our external CSS. 126
So this describes the hierarchy of these three different ways of implementing CSS, and what it means 127
is that you can apply a global CSS rule to all of your web pages, 128
but on the individual web pages you can apply more specific rules through using internal or inline CSS 129
as more or less one off changes for that specific page or that specific element on that page. 130
So let's restore our web site to the way that it was before and you can mess around with implementing 131
your CSS in those three different ways and see how the importance of those rules depend on 132
where you write it. 133
Now in terms of best practice as a web designer it's usually suggested that you implement all of your 134
styles inside your external CSS. 135
Now in the next lesson we're going to look more closely at the CSS syntax and what a CSS rule is 136
composed of. 137
So for all of that and more I'll see you on the next lesson.