I thought we might walk through a couple of warm up examples of analytical debugging together. What I've done is I've taken a page from my site and ported it over to a word press site that I hvac in a hurry. Word press is a platform that you could actually use to take your JSFiddle code live. We're not focused on here in the course but the reason I chose this is that now in this infrastructure, there are various style sheets that are coming from word press, various style sheets coming from those custom stuff that I put in and I wanted to be able to show you how they might conflict and they do conflict here. No spoilers. Well, I guess that was a spoiler but they conflict and there's some weird behaviors that we're going to diagnose and just look at where we would fix them, which is 90 percent of the battle most of the time. So let's get into one specific example. Our first one, these typefaces just do not look the same. This one is what we call san-serif. They aren't little things and differences in thickness on the different letters whereas this one is serifs. So for example, If we look at the little r here and we compare that to little r here, we can pretty much definitively see that they're quite different. What I want to have happen, which is a great thing to make sure you've answered for yourself before you dive in especially to this kind of analytical debugging, I want this type here to look like this type because that's the type that appears most of these places. So the first question I'm going to unpack and answer then is, what is this typeface exactly and where is it coming from CSS wise? If I go over here to compute it, I can see that font family, which is where the typeface comes from and if I didn't know, that I would just Google how what CSS property applies the font or typeface to html? I'm sure you would find this one. This says okay, well look there's this Lucida Sans Unicode which is the one that's getting applied. It's getting applied on the basis of this thing being a paragraph element, is what that little p means, and then it's coming from this CSS, which I recognize in this case as CSS that I pasted in. So that's where the paragraph stuff is getting this. Now if we go from sources back to elements, I can also see a couple of other background things. There's an entry for Lora serif that applies to all body elements, and perhaps if there isn't a entry in this custom style sheet that's applying to lists ULs, is the html element that is unordered list and there's OLs ordered lists, which actually I think this is a numbered list is an ordered list and a bulleted list for example is an unordered list. Anyway, let's take a look at this. So we've got a certain type face that is applying to all body elements, unless there's something else, a more specific entry that applies and if we go up here, we see this is coming from the theme Activello, which not to get into the intricacies of word press but you add these various themes to prescribe the styling. If you go to CNN.com or just any kind of website, they probably have style sheets coming from a few different places and that's something you'll need to be able to diagnose, and the cool thing about the Chrome debugger is it allow us actually simulate this change. So anyway, that's a little bit of a background. There's even some other entries here that have less precedents but we'll ignore this for now. Let's look at the type that has a typeface that we don't want, we want to type with Lucido , we know that and we see it is in fact getting this lower serif entry that it's part of the body CSS. So if we go back to the CSS that we want, we click "Inspect" and we click "compute it again" and we just take this entry that it's getting. This is our paragraph element, these are the typefaces are getting. If I go back here, I click" Inspect" and then I just want to validate that. If we change the body type in this other style sheet to be the typeface that we want here, then what would happen? So I clicked on it, it popped me back over to the Styles tab, which lets me actually go and shows me a preview of how this would look. Now those look the same. That's better, looks a little less crazy. Now, I've just changed the local copy here on my computer. So I need to get in to the style sheet that we saw earlier and change this entry, body type or hopefully there's not these kind of handoffs but If there is, e-mail somebody your file, a ticket or something, " Hey can you change this specific thing here," and here's why and I ask for that for instance, but I have isolated and validated the change that I want to make to get the behavior that I want which is again 90 percent of the battle here. So that's one analytical debugging example and then we're going to stay with this page and in the next video we'll look at one more.
