CSS Cascade in Dev Tools

[00:00:00]
>> Your browser's dev tools are incredibly useful for visualizing how exactly the cascade is working. So I know you have experience with dev tools, you've used them before. But you may not realize what you're looking at when you track down styling with dev tools. So what I'd like to show you now is how this winds up working when you were looking at, in this case, somebody else's code.

[00:00:25]
We put it into dev tools and we can see the cascade in action. Where we're going to focus is on this purple line here, which says a tree needs to be your friend if you're going to paint him. And of course, you can refer to the HTML and CSS here, these are the files that come from GitHub.

[00:00:46]
And you can see that on line 25 in the HTML, we have a strong element. It has a class of tree, it has an inline style associated with it. There's also styles over here in the external style sheet that are also affecting this particular item. And while we can read the CSS and eventually figure out what's going on, dev tools are much faster and way more visual.

[00:01:10]
So let's dig into that now. I am using Firefox, you are welcome to use Chrome or any of the other browsers with their browser tools, you'll find similar types of tools there. So I am going to visualize this. I'm gonna to visualize this here in Firefox by going to Tools > Browser Tools > Web Developer Tools.

[00:01:31]
I have my developer tools configured to show up on the left side of the screen. You may have your own developer tools configured to show up somewhere else. And I am just gonna make them a little bit bigger here. So we're gonna track down, first of all, through the HTML, the target that we want to investigate.

[00:01:53]
So here in our developer tools, it's gonna be inside of the body. Of course, the blue shading helps you figure out where you are. It's not the h1, not the paragraph, not the paragraph, it's the third paragraph. And then we wanna take a look at the tree. And I'm going to click on that.

[00:02:11]
And when I click on that particular HTML element, you will see in your CSS window that we have a whole series of styles that start all the way down here from the very bottom of the screen. The very bottom of the screen is our root declaration, that is, our colors that we have that we may be using inside of this particular document.

[00:02:37]
And as you see here, it says that those are inherited from HTML. HTML is the root element in an HTML document, and so that is what root is selecting here in this context. Then we have inherited from body, and you'll see here that the body is set to be trebuchet with the line-height and a font-size.

[00:03:00]
But our font family has a line going through it, which indicates that somewhere later in our document, we have overwritten this along the way. So while our line-height and our font-size are continuing to inherit from the body, we've overwritten that font family later on. Then we're going to go through, all of the next group of styles here are all coming from somewhere inside of the author environment.

[00:03:30]
And so these are sorted in order of specificity as you can see here. We start with our border-box declaration, which has the universal selector, has no specificity, and before and after, which are pseudo elements, so they have a specificity of 001. We then go to our strong element, just a plain old element 001.

[00:03:52]
It had a color of pink, but that's been overwritten. As you can see, it was overwritten by tree, tree, which has a higher specificity here. To this, we have added display block and we are displaying it in purple. Then we're going on to a very specific selector, p:nth-of-type(3) strong.

[00:04:15]
We've told it to display as normal. But then, inside of the element that comes the last part here, as you see over on the side, it indicates that we are in line. This is an inline style. Inline styles are gonna beat anything that's coming from the external style sheet or what is embedded.

[00:04:34]
And so there are p:nth-of-type(3) strong with a font weight of normal. It's beaten then by an inline style, which, in this case, says bold bang important. So it's going to override that, and the font family is also located here. So that is why a tree needs to be your friend if you're going to paint him.

[00:04:56]
It's in fact, Georgia, it's bold, it's display blocks, so it's on its own line. It has a color of purple, and it's displaying as a border-box with a line-height of 1.5 and a font-size of 1.2rem. Basically, we have to go through this document and we have to add up all of those styles distributed over all of those different rules.

[00:05:21]
To finally come up with and create the style that is displayed here inside of the web browser. This is a relatively straightforward example of how this works. The more external style sheets you have, the more inline styles you have, the more embedded styles you have, the more complicated this process may wind up being.

[00:05:45]
But your browser is showing you here, inside of your CSS window, all of its work. It's showing you all of the math that it's doing and it is showing you why what is winning happens to be winning. And it's not necessarily a single style rule by itself that wins, it's parts of many different style rules that add together to give you this final look here on the webpage.