Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "CSS Rules" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian breaks down an example of a CSS rule into its three main components: selector, property, and value.

Get Free Access Now

Transcript from the "CSS Rules" Lesson

[00:00:00]
>> Brian Holt: So, if I have an h1 right here, and I wanted to make this h1 red, something like this. So how would I do that? You can't do that with just HTML. You need something else to come in and effect that. So we're gonna write a CSS rule to make that the case.

[00:00:20] So that is going to look like this. This is what CSS looks like.
>> Brian Holt: So let's break down all of the pieces here. I have an h1 right here, right? This is called the selector.
>> Brian Holt: The selector selects, I think that follows, right? So in this case it's going to say, every h1 on the page, if it is an h1, then apply everything between the curly braces, okay?

[00:00:49] So these are called curly braces in case you didn't know.
>> Brian Holt: [COUGH] So it is apply everything between the curly braces. Now we only have one thing to apply between the curly braces. We say, the color: red. Color is called a property, so there's how many properties? I said right there, there are about 350 properties.

[00:01:17] This is a lot like HTML, that you really are only gonna use, again, maybe 50 to 100 of them, there's a lot. And there are people that are more, are better at this than I am that will probably use more things. But for the most part, there's gonna be about 50 of them that are gonna use a lot, and then the rest you're rarely, if ever going to use.

[00:01:39] So color, as you may imagine is quite useful, we use it quite a bit. So color is going to change the font color. That's just what it does. It's one of those things that you kind of just have to know what these things do. And you can always Google it.

[00:01:55] You could just Google how do I change font color, and I guarantee it would be one of the first things on there. So,
>> Brian Holt: Then I put red here, this is called the value. And red happens to be a value that CSS understands. It understands what red means.

[00:02:16] So that's why this works, it turns the color red. We saw hex before, you can also put hex here. In fact, I put right here all the ones that CSS understands. It understands a bunch of different ways of doing color. It understands hexadecimal, it understands rgb. This is how you would do rgb right here.

[00:02:40] And it also understands hsl. Which I do not know nearly enough about hsl. It stands for hue, saturation, and lightness, I think.
>> Speaker 2: Luminosity.
>> Brian Holt: Luminosity.
>> Brian Holt: It's a mystery, I'm just kidding. I know, I never use it, I'll put it that way. [LAUGH] And then it understands 150 what are called named colors.

[00:03:06] And there's some really weird named colors.
>> Brian Holt: But if you understand more about like how CSS can do colors, I put a link to an article there on CSS tricks, really explains everything really well. And I'm not going to explain it to you anymore than that, but,
>> Brian Holt: And then you see here there is a semicolon.

[00:03:28] That's just like punctuation in CSS it's saying like I am done with this sentence. It really is like a period or a full stop for CSS. You just at the end of every line you just put a semicolon to say, I'm done and I'm gonna go onto the next thing.

[00:03:43] It does have to be there.
>> Brian Holt: So I can put a lot of things inside these rules. It doesn't just have to be one thing. You can see here, I do a lot more. So I knew another color, limegreen is the color. Font-size 60 pixels, that's the px stands for.

[00:04:06] There are lots of ways of doing measurements in CSS. So just like I can say, that this person's five foot tall or so many centimeters tall, or that are like 0.0001 miles tall, right? There's many different measurements for doing height, just like there is for CSS. You can do it in pixels, you can do it in ms, you can do it in x.

[00:04:32] You can do it in centimeters, you can do it in inches. There's a lot of ways to do that. I will say that mostly really only use pixels and ems.
>> Brian Holt: That's maybe about it, yeah.
>> Speaker 3: So why are you just writing the font size if you're already doing h1, that determines how big it is?

[00:04:57]
>> Brian Holt: That's a good question, so why are we telling it a different font size? I guess maybe that's what our designs dictated, that we wanted to be bigger or smaller, something like that. I think the default font size for h1 is 36, if I'm not mistaken? 36 pixels, so you can see here this is quite large.

[00:05:20] So the reason why we would do that is because we want to be larger. We designed it for some reason to be larger than that, cuz we wanted to. [LAUGH] I don't know if I have a better explanation than that. Does that answer your question, or not answer your question?

[00:05:37] [LAUGH] It is a good question though. Or for example, what if we wanted it to not be bold, right? Because, by default, yeah.
>> Speaker 4: I was just wondering if you could explain ems.
>> Brian Holt: Sure. I think I have on here as well, another CSS tricks article about measurements.

[00:06:02] So I will explain ems because they are useful. A lot of times we're doing relative sizes. We want things to be like relatively sized rather than just being like absolutely sized. So pixels is an absolute sizing. It's actually not literally pixels just so you know, but we call them that.

[00:06:23] Ems is measured in relation to what your font choice is, right? So if I change fonts, then I want the sizing to be relative to the font, so what it actually does is it measures the width of a lowercase m. That, something like that, right? And that's what ems is, it's literally ms long.

[00:06:44] Weird, right? [LAUGH] But it ends up being really useful because even if you change fonts, all of your measurements will change in relation to your font. It's a little confusing but it actually ends up being quite nice. There's also xex, and if that's the height of a lowercase x.

[00:07:06] I never use that one, [LAUGH] But you can see the CSS tricks here, article to see all the rest of them. And that's how you write ems right there, it's.
>> Brian Holt: Cool.
>> Brian Holt: Any questions on measurements, furthermore? I measure almost everything in pixels. Probably more things than I should.

[00:07:34] It's just something that I've done for so long that you just kind of get used to doing it that way. You will see things occasionally in rems. There's some weird behaviors if you have resized ems. I don't really wanna get too deep into that rabbit hole. It's a deep rabbit hole.

[00:07:56] So you can have rems which are root ems, which are ems measured at the root level, which is like the top level of the page, or based on the bodies width.
>> Brian Holt: We're gonna leave it at that. It's basically, ems that are not affected by magnification, or like pinch to zoom, or things like that.

[00:08:23]
>> Brian Holt: Yep.
>> Brian Holt: So next thing I would talk about is font weight, so you can make things bold or not bold. And that's how you do that with font weight.
>> Brian Holt: So each fonts are bold by default. If you wanna make them not bold you have to say font-weight normal.

[00:08:46] And you can also do light as well. So if you want it to be extra thin. Text-decoration, you'll notice that this is underlined, right? You can see the green underlining right there. That's how you do that. You can also do over line, which I don't know why you would ever do that, but you can, it's a thing.

[00:09:07] And there's also line through if you wanna do strike through. Text transform, so you'll notice here that this is all in uppercase despite the fact that this is an h1 with normal casing. That's something you can do with CSS is say make this all upper case. Which is kind of interesting.

[00:09:26] Word of caution, I used to do localization for Netflix. Which is like translating from language to language, right? And I did all the coding for that. And if you do text-transform: uppercase, it changes the meanings in different languages. For example, I know with Turkish it kind of messes with the meaning depending if it's uppercase or lowercase.

[00:09:47] So be careful if you're developing for different languages that you don't do text-transform: uppercase. We had to remove that a lot throughout the Netflix code base. You can also do lowercase or capitalize, which will capitalize the beginning of every word, that works, too.
>> Brian Holt: Border: 3 pixel solid pink.

[00:10:09] So it's kind of hard to see there, but there is a pink border there, I promise. That is three pixels wide and it's solid. So this is called a combined CSS property. Cuz you can see there we have three different values for one property, right? It's solid, it's pink, and it's three pixels wide.

[00:10:32] This is actually the combination of border-style: solid:, border-color: pink:, and border-with: 3px:. This is called like a short-hand CSS property that you can kind of just shove them altogether. You'll see that a lot, that's why I wanted to show you that kind of front. But you can totally change this to be five pixels wide.

[00:10:51] You can change this to be double border, or dashed, or dotted borders. And obviously, this can be any number of colors. So you'll see the lot, so just kinda get use to it. We'll talk a lot more about the selector, there's actually a whole section on it because it's a complicated beast.

[00:11:14] [LAUGH] But yeah, cool.