Cascade Code Demo

[00:00:00]
>> Let's start coding now. And at this point, what you'll need to do in order to follow along with me, there's not gonna be any code pens. Because of course, code pen will only allow us to type in that little CSS window that's there. So what we're going to do instead is we're gonna switch to VSCode.

[00:00:17]
Inside of the website for the course, you will find a link to the GitHub repo where you can download the files that we're about to work with and I'm gonna work on them in VSCode. You are welcome to use any editor that you want, but by using VSCode, we'll have access to more ways of including styles inside of our document.

[00:00:35]
Now that you have a sense of how the cascade works, let's do a demo and see how we can get it to work here inside of VSCode. So if you open up the two files that we'll be working with, which are index.html and take a look at style.css, there's a couple of other files that are in there, you can ignore those for right now.

[00:00:57]
We're just gonna look at index.html and style.css. You can see that these are linked together and I am going to just scroll to the bottom of my CSS. And I'm going to start here, in this particular demo. Let's say that I have a paragraph, and I want to put a border around these paragraphs and we'll say it's 2px solid red.

[00:01:24]
Save my style sheet, and if I take a look at this inside of my browser window, shockingly, I will wind up with borders around all of my paragraphs, nothing new there. Let us take a look at other ways though that we can include this same type of styling inside of our CSS.

[00:01:44]
Remember, border of course, is a property that does not inherit, that's why we're gonna work with that here, in this particular example. So this is the external style sheet. And if you take a look at the head of this document right now, we have our style sheet is linked here on line number 8, that's our link to our external style sheet.

[00:02:05]
After that, we have an embedded style or also called an internal style. What goes in between the style tax? So if I were to go here and say paragraph, border 2px dotted blue, what color would the borders be around my paragraph at this point in time and why?

[00:02:30]
Blue blue blue, everybody thinks blue, okay. And if we refresh the page, sure enough you're all right dotted blue borders around all the paragraphs. Why? They have exactly the same specificity, right, we have just the type selector here and it happens to be that my embedded style comes after my link style.

[00:02:55]
What would happen if I took this line 8 with my link style and I move it after this embedded style here? What color are my borders now? Red or blue?
>> Dotted blue?
>> Dotted blue? Okay, dotted blue.
>> One person said red.
>> One person said red, one person said dotted blue.

[00:03:19]
They are going to be red, okay? And this is because my linked style comes later in the document than my embedded style. I believe it was an older rule a long time ago, where the embedded styles always took priority over the link styles. But the way it works now is that whatever comes later is the one that wins, where the specificity is the same.

[00:03:45]
Of course, we can always amp up the specificity along the way. So now that my link style is coming after my embedded style, do I have a paragraph with a class on it? I don't. So let's just say I wanna take this first paragraph and put a different border on it.

[00:04:04]
We can do that here, inside of my linked style sheet. We could put this even earlier, let's say, it's p:first-of-type. And let's say it has a border of 4px dashed, double, one of my favorite border types, double black. In fact, we'll make it a little bit bigger so you can appreciate the beauty.

[00:04:32]
So the first paragraph, the first-of-type will have a 10px double border, whereas all the rest of the paragraphs may have either a red border or a blue border depending on what the order happens to be. So if we save this, how is our first paragraph going to look?

[00:04:57]
If we refresh the page, we have something interesting going on here, and why? They actually have two paragraphs, looks like the first and the last paragraph wind up with the double black border on it. And that may be a little bit confusing, until you take a look at your HTML.

[00:05:21]
In the footer, we have a paragraph and it is also the first-of-type inside of the footer. We haven't been specific and said, article p:first-of-type, we just said all paragraphs that are the first of their type. And so therefore, we've selected the paragraph in the footer. In addition to selecting the paragraph, that's the first one in the article.

[00:05:44]
It will override the red border and so forth and that is because its specificity is higher, right? First-of-type is a pseudo class, paragraph is an HTML element. So our specificity for this selector is 011, whereas the paragraph has a specificity of 001. And so even though it's coming earlier in our external style sheet, the greater specificity is going to win out over some of these styles that come later.

[00:06:15]
And that is why the paragraph border looks different here. Now, what if we start to get even crazier? So here in line in our paragraph, I add to this, a style, Border, in fact, let's just do the border-bottom of 3px dashed orange. So now, I have an inline style here for my first paragraph, how is that paragraph's border going to look now?

[00:07:01]
Think about that for a moment. When we refresh the page, you'll see that we have a dotted orange border on the bottom, whereas the rest of the border is that black double border. Why is that? Well, remember the border, the property border by itself is shorthand. It includes all four sides of the box, whatever box you're working with.

[00:07:31]
As you spell out in your values, it includes the size and the color and the style of that particular border. So we have overwritten just the bottom border with what we put in line. Because in line, it's going to be anything that comes elsewhere in the document even if the specificity, we're just got it right there in the paragraph is lower.

[00:07:56]
But the left, right, and top portions of that border are still gonna take their styling from that p:first-of-type. And of course, this only affects the first paragraph, because that's where we put it in line. And so now, we have that dashed border there underneath. Okay, and then of course, the last part of this is starting to throw in your bang important.

[00:08:21]
And my sense about bang important has always been, people put these in, because they don't understand what's going on in the cascade. They don't understand what's going on with specificity, they don't understand what's going on with inheritance. Someone told them somewhere along the way, just throw in a bang important and maybe that will help.

[00:08:41]
And they've done it a couple of times and it helps sometimes. And then it quote doesn't work other times and they just get very, very confused by it. So my recommendation to you is as follows. I strongly recommend not using it, just don't use it, because then you wind up with styles that are far more predictable.

[00:09:02]
We don't go to the mirror universe of the important styles, we're gonna stay right where we are with the normal styles. And you usually have enough depth that you don't need bang important to override things. I think in my career, I've only had to use bang important a handful of times.

[00:09:19]
It was inevitably in a situation where I was working with really crappy code that came from a WordPress developer somewhere along the way. And they've already put bang important somewhere and so this was the only way that I could override what they had done. So let's take a look at how this might wind up working out.

[00:09:39]
So we're now in this style up here at the top, we have an inline style that says the border bottom is 3px dashed orange. What I'm gonna do now is after my p:first-of-type, I'm gonna add a bang important. Okay, so now that p:first-of-type is going to have a four sided black double border, but in line, we have an orange dashed border.

[00:10:14]
What is the border going to look like around that first paragraph that's there on the page? Is it going to have a black double border on all four sides? Or is it gonna have a black double border on three sides and an orange dashed border on the fourth?

[00:10:31]
And then we can take a look and see what happens. And when we refresh, you'll see that that bang important in the external style sheet is overriding the inline style that we have. So this is one of the useful things that you can do, if you are working in an environment like WordPress, Squarespace, Wix, some of these other various site editors.

[00:10:54]
Where you may have that big box that just says Custom CSS here, but you don't have access to the HTML, you have to have access to HTML to do an inline style. But when you have an external style sheet, and you're trying to override an inline style, bang important is the way that you're gonna wind up having to do that.

[00:11:15]
So that would be the use case for that. If you are custom coding your applications, you have access to all of the HTML and the CSS. Honestly, there truly is no reason to be using bang important, okay? It winds up being a useful thing only if you're working with other people's code and you don't have full access to it.

[00:11:36]
That is my opinion for how bang important should be used.