Introduction to Web Development What is CSS?

Transcript from the "What is CSS?" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: Let's talk about cascading style sheets or CSS, as I will hereto refer to them as. Sometimes refer to as California style sheets, but that's just for fun. Makes me laugh. All right, so CSS, before we've been talking about HTML, it is the content, right? Like it's actually like the words on the page.

[00:00:28] Like if you noticed in the previous section, there was no style, it was just black text on a white page. Purely the content on there. This is going to be taking the content and making it looked like styled differently. So, there's gonna be no text rendered from CSS, instead you're gonna say, there's text on the page, now make the text red.

[00:00:51] Something like that, right, purely presentational. So, in HTML, you're describing your content. In CSS, you're giving this content rules and saying, if you are this kind of content, you look like this. So, that's why these CSS things are called rules, they're blocks of rules. Yeah, and this is all called declarative programming.

[00:01:22] If you want to use the technical term. We're about to get into imperative programming which is what JavaScript is, but here you're just saying, I declare this is what it is. You're just saying here is the current state of things. Whereas imperative is much more like, if this happens than this will be this.

[00:01:43] Yeah. Cool, so let's talk about some CSS rules. We kind of already saw this a little bit earlier, but let's just kind of go over this. Let's go back to CodePen. So, now we're gonna start using this little CSS block down here.
>> Speaker 1: And here I made a rule and this rule affects the body tag, right?

[00:02:12] So, it's saying everything in the body now will have to adhere to these rules, right? So, now everything is red. Or everything can be green, or it can be blue, right? So, CSS understands a bunch of colors, like there's like SlateGray. Yeah, random ones, right? It's got like, I don't know, probably like 100 colors or so.

[00:02:46] You can also give it hex values. If you don't know what a hex value is, don't worry to much about it. But if I say 999, that'll be some shade of gray, right? Or you can give it rgb values which are red, green, blue and you can do like 125, 0, 0 or something like that.

[00:03:08] And that was red, I guess. [LAUGH] I didn't know that. I guess it makes sense cuz it's mostly a red value. Anyway, there's like a dozen different ways to give colors to CSS. And just I don't know how to generate them for the most part, I just let Photoshop do it for me and say, ask me what the hex value is for this?

[00:03:31] And it'll give it to you. Anyway, for the sake of this class, we're just gonna stick to blue, right? Because that's just easier to remember. But I guess what I'm getting at is there is a way to fine tune that color, if you really want a specific color.

[00:03:54]
>> Speaker 1: So, that is what a CSS rule looks like. The color part is the property, right? It's the part of whatever you're modifying that you're modifying, right? So, in this case, we're modifying the text color of the entire body, and then the part of it, that's like the red part, is the value of it.

[00:04:21] So, the property is color, the value is red.
>> Speaker 2: Would that affect every type of sub tag that was inside the body that had a color property then?
>> Speaker 1: Everything in the body will now be red.
>> Speaker 1: And we're about to get into why it's called cascading style sheets, right?

[00:04:41] And the reason for that is, that there is kind of like, and we'll talk about later, it's called specificity.
>> Speaker 2: [COUGH]
>> Speaker 1: But for now, it's enough that that makes every piece of text in the body red. Questions on that? Makes sense, right? So, now let's have two different kinds, or two different rules, rather.

[00:05:13] Oops.
>> Speaker 1: Okay, so now we have an h1 here, that's being affected by this body tag, right?
>> Speaker 2: [COUGH]
>> Speaker 1: So, everything in the body is now red. But I now have this p1, that tells the color to be green. So, now this is red, which note, right?

[00:05:39] If I delete this, what color is it gonna be? It's now red, right?
>> Speaker 1: So, why is that?
>> Speaker 2: [INAUDIBLE] body.
>> Speaker 1: Yes, it is in the body. So that top modifier, the body modifier, does effect it, but the p is lower on the style sheet, therefore, it is green.

[00:06:07] So, we'll get into specificity later. There's other ways to override it but for right now, these two things, the one that comes last is gonna be the one that affects it, all right? I'm pretty sure, let me just double-check this to make sure that I'm not leading you astray.

[00:06:33]
>> Speaker 1: Okay, and that's kind of what I was worried about. So, in this particular case, it still does affect it because I don't think the body tag has specificity to it. Anyway.
>> Speaker 1: For the most part, the one that's gonna be lower on the page is going to be the one that affects it.

[00:06:57] If everything else is considered equal, it'll take the one that's last on the page.
>> Speaker 2: It's basically because you're applying it to the paragraph instead of the body text. The body is the parent [CROSSTALK]
>> Speaker 1: Right, so it's gonna take the closer one.
>> Speaker 2: I'm not sure how to explain that but the most specific one.

[00:07:15]
>> Speaker 1: It's the most specific one. And again, we're gonna throw the term specificity around a lot which it's just how the rule engine works. But Mark nailed it, that the p tag is closer, right? It's the one that's closer. This one is the parent, so it's further away and so it's gonna take the green one.

[00:07:39] Kind of an edge case like I wouldn't worry to much about that.