The Cascade

[00:00:00]
>> Jen Kramer: I had a couple of things that came up here that I wanted to talk with you about, a couple of concepts. So as we have learned this much CSS so far and there's a lot of concepts that I haven't even talked about that are really important in CSS.

[00:00:14]
So I wanted to in my code point out a few things that may come up as you were writing your CSS. So for example, here on line ten I start with a H-1, okay. And then the H-1 here for my styling, I'd say that it has a dotted red border with white text.

[00:00:33]
Okay, as you know, that's not how it looked, right? That's because later in my document I have another H1 down here, okay. And this H1 says make the background color black, and the text align, make it centered, all right? And so, what browsers will do, very happily, is it will take those two styles and mush them together.

[00:00:57]
No problem. It'll go ahead and do all those things to the H1 Okay? What happens though if I said this? Up here on the h1, I said a five pixel dotted red border, and then down here later on my next stage one, I said instead a five pixel dashed Blue border.

[00:01:27]
>> Jen Kramer: What's gonna happen now? I have the border in both places? How many people say it's gonna be the red one with the dots?
>> Jen Kramer: How many people say it's gonna be the red one with the dashes? All right, we're about splitting the classroom between red, blue and nothing, okay?

[00:01:48]
Yeah, Genesis.
>> Student1: Ever combine, and it'll be red and blue like so.
>> Jen Kramer: Like red and blue, but dotted am dashed, that would be, that would be awesome. But no, unfortunately. Yeah, that would be really be awesome though. That'd be kind of fun. So what happens here? This is the C in CSS.

[00:02:08]
What is C and CSS stands for?
>> Student1: Cascading
>> Jen Kramer: The cascading style sheet right. This is a style sheet. The C is the cascade part. So cascade means, if we list a style earlier in the document and we say it's one way, and then later in the document, we say it's different way, the thing that's later in the document wins.

[00:02:31]
Okay, yes?
>> Student3: Like he was saying, if the first one was more specific, will that win, or was it always just the later one?
>> Jen Kramer: It gets more complicated than that.
>> Student3: Okay.
>> Jen Kramer: Okay, so the classes and IDs, and we can make this super complicated, but for right now, if it's later in the document, the thing that's later in the document, that's what's gonna win.

[00:02:50]
So all right, so that's the first thing. The second thing is, by the way. If you do this and you write an H1 early in your document, and you write an H1 later in your document and your document's only 50 lines of code long. You're a terrible programmer.

[00:03:04]
Okay? Don't do this, cuz you're just going to confuse yourself. So, what I would recommend that you do. In a case like that, this is very easy to do. You're you're working away today, right you're H1 style. Later on, you go, yeah, I need an h1 and you write it later.

[00:03:19]
Just combine them, because it'll make your code much more easy to maintain over time. Go ahead and go back on up and then paste in what you've got here. Okay, now so I wanna hid and I did what I just said to do, I combined my styles. Anyone see any issues with the code that I just combined here?

[00:03:41]
Yeah.
>> Student2: Two different borders.
>> Jen Kramer: I have two different borders now within the same style, right? Which one wins? First never wins, last wins. Last wins in CSS, okay? So in this case, the border will be dashed in blue. And again, if you do this, especially in one style like this, you're a terrible programmer.

[00:04:02]
Don't do this. So pick one and get rid of the other one because otherwise you just confuse yourself. So what do you really want? I want a dotted red border so that -blue thing is gone.