CSS Overview & Rules

[00:00:00]
>> So just like we have the basic building block of what HTML is which is the tag right? Place to that word 50 times in the past bit of the class. The basic building blocks of CSS is the rule. So a rule looks like this. It's got this is called the selector, the H1 here.

[00:00:26]
And then inside of it, you're gonna have a bunch of properties that you're gonna set. But this entire thing you would call a rule in CSS. Let's explain that in just a second. So we're gonna define a bunch of rules which are gonna define the style of our particular website.

[00:00:47]
So again, cascading style sheets. Not a programming language per say in the sense that it's just declaring that if you have this, it looks like this. That's the entire thing of what CSS does. You're just giving the browsers hey, if you recognize this pattern, then apply these styles to it.

[00:01:05]
That's it. If you match this selector, apply these styles. That's the entire extent of CSS, it is really no more complicated than that. So if I wanted a rule that said all h1's on my webpage will be colored red, you would write this. That's what this rule says it says.

[00:01:27]
All h1 which is what the selector says will be colored red. So again, this is like we were talking about our car analogy where it's touching to tell you how it looks and how are arranged in some of those other things like that. But it doesn't change the content, right?

[00:01:46]
So I'm not saying that all h1's will have the text blur. You don't do that with CSS. You do, all h1's will look like this. So that's what this would do. It would make all h1's. So this is an h1 be colored red like this. So again selecting this the h1 is called the selector this part here.

[00:02:15]
You're basically saying you're giving the browser of look for anything that matches this pattern. And that can be a lot more complicated than just h1 but I'm showing you a very simple one. But it's gonna match your HTML, right? CSS does nothing by itself, it needs HTML, it's paired to HTML.

[00:02:35]
Whereas like you and I just did a section on HTML we technically didn't need any CSS for the HTML to be functional. A style sheet by itself does nothing it needs something to attach to any HTML to attach to, okay? This part here, the color colon is called the property.

[00:02:57]
And there's Some 350 properties. If you look at this, these are all the things that you can set in CSS. Most of them you'll never even think about. Page break before, I don't even know what that does. I never even heard of it until literally right now as I'm teaching the class on CSS to you, someone's gonna say like but Brian it does this I don't know.

[00:03:28]
Haven't had to use it before, which is to say I Google things a lot when I need them. And that's totally okay. It's very expected. So anyway, the properties. There's 350 of them. You'll never use most of them. Same kind of thing where we had that zip distribution of them.

[00:03:46]
You use some of them a lot color. You can use color a lot. As you might imagine we call it a things different things a lot. Page break before, almost never. Cuz again, I don't know what it is. Maybe you're very different than me, but probably not. So maybe, yeah, 50 to 100 or extremely useful and there's a long tail after that.

[00:04:09]
So color property affects the color of the font, right? So this is red. It actually affects more than that. But we almost never use it for anything besides that. So, in other words, just mostly use it for font color. And then this here is the value. So this value can be any number of things.

[00:04:33]
It can be a named color. It can be a hex color. So let's just inspect this and mess around with it and see what happens. We're gonna make this go to the side, top the right. Make this bigger, get rid of that. Okay, so you can see here I have this color red here.

[00:04:58]
We can make that blue, right? We can make this. There's so many. Look how many colors are. Some of them are really funny. I think my favorite is peru. If you didn't know that's the color of peru. Why is it the color of peru? I don't know, but that's what it is.

[00:05:21]
But most things that you would expect, I don't know. I think there's a lavender. If you wanna make lavender blush, that's a nice color difference. Medium orchid. I don't know. That's that's a medium orchid, right? So there's a bunch from. Those are called, named colors. But also technically if I put 555 that will be a shade of black, right?

[00:05:50]
So there's hexadecimal colors, you don't have to really care about that. But there's a variety of ways that we can denote color. I'm gonna stick with red though. So red there is the value. You can see that there's named colors as 150 of those. Understands hex values. Which is FF000 which would be to red.

[00:06:20]
Yeah, so FF this here would represent red. It's actually the same color as red, this red. RGB which red, green blue. So 255 it goes from zero to 255. You don't really have to care too much about any of this. I'm just kind of giving you examples here.

[00:06:39]
This would be red and then HSL which if you are a color design nerd, HSL which is Hue Saturation Lightness, I think is what that stands for. This would also be red as well. I understand HSL far less but it's also very useful if you're trying to do color modifications on the fly.

[00:07:00]
Yeah, so all those things evaluate to the same color as red. You don't have to really know how all these work, I'm just kind of trying to demonstrate to you that the value can change contextually. If you're super interested into how all of that works, there's a great article on how colors work on CSS tricks, and I left a link there for you.

[00:07:27]
Okay, and then last thing to note here, semicolon, very important. You must put a semicolon. It's like a period at the end of the sentence here. It's punctuation to let the browser know, I finished this complete property, pair, I'm done, I'm moving on to the next one. If you forget it, the browser will not understand it and will ignore it, right?

[00:07:48]
So make sure you're putting your semicolons, okay?. So now I have this one, which has a lot more stuff going on. So I just wanted to demonstrate to you, one rule can have a lot of stuff inside of it, and typically will have a lot of stuff inside of it.

[00:08:08]
So color lime green. That's why this one is this lovely shade of lime green. Font size 60 pixels. So some of these have units, right? So pixels is px, right? It's 60 pixels high. It's actually usually not literally that. It's just like a relative measurement. There's also several styles of size.

[00:08:30]
So we use pixels but there's Ms there's Xs there's vertical heights. There's a ton of different ways to measure widths and heights but pixels is the most common. So in other words if you put font size 60 with nothing, it won't do anything. Right. It's like asking someone how tall are you?

[00:08:49]
And they just say, I'm three. Three, what? You have to tell them what? I'm three feet, three meters, three yards, right? So that's what this is here. Font, weight, normal. That's saying instead of being bolded, be normally, right? So it's not bolded, but you can also have light as well.

[00:09:13]
So if I put bold there, right? Or I think there's a lighter, right? Some fonts don't have lighter. But there's like 600, 900, that's really bold. If you have 100, looks like this doesn't have a 100, but that'd be really thin. It depends on each font, right? Some fonts have it some fonts don't.

[00:09:38]
What else here? Text decoration right? Underlined so that's why this is underlined now you might ask me hey Brian, how do you know that text decoration underline go together? It's like I don't ever remember I always have to Google it Right. So I just Google CSS underline and the first thing that shows up will be text decoration underline.

[00:09:58]
But I mean, there's some absurd things in here as well. I think there's over line. Yeah, there's an over line. I don't know why it's there, but it is. There might be, is it strikethrough? And it's not lline through. Yeah, so if you want to do strikethrough, as you can see, all this stuff kind of comes hazy to me.

[00:10:23]
When's the last time I had to do strikethrough? I don't know if I've ever actually professionally had to do strikethrough, right. So it's probably the last time I taught this course. But it's all, this is kind of what I'm talking about I want you to be exposed to things that you'll see now and you'll never remember a strikethrough.

[00:10:41]
But five years later when you're showing someone else how to code, right? You're gonna say I remember there is strikethrough and you just Google CSS strikethrough and you'll just get it right? That's things that you know that you don't know, all right? It's things that you knew that you knew, but you could remember and it could eventually figure out again, but you don't have to on the tip of your tongue.

[00:11:00]
That's most of programming by the way. It's a bunch of stuff that you know, plus a bunch of stuff that you could Google later. Okay, so we'll leave that as underline. Text transform. So this is all uppercase now. So notice this one up here, this is an H1.

[00:11:21]
Notice this wasn't all uppercased. But here it is. That's it this text transform does. As you might imagine, you can change this from uppercase to lowercase. And now everything is lowercase. There's capitalize right? Which will capitalize the beginning of everything. There's some other ones full width. I didn't even know that was a thing until literally right now.

[00:11:48]
Full size can't. I'm gonna guess that probably goes with Japanese or some other language. So you'll find that's another thing here is lots of these have to do with other languages besides English because rightfully so the internet is for everybody in all languages. So they also have their uppercase and lowercase built into that because uppercase and lowercase is a thing for Latin based languages and Latin character based languages.

[00:12:17]
But it's not a thing for other languages that have no concept of uppercase and lowercase. I remember I worked on the Turkish translation of netflix.com, we had text transform to uppercase in several places on netflix.com. Apparently that breaks Turkish. I'm trying to remember it was Turkish or Arabic or something.

[00:12:40]
It was a language I was working on unfortunately don't remember which one it is. But we had to take it out of everywhere because it didn't make sense in some of the languages that we were translating Netflix into. So that's some things to be aware of. We have a border of three pixels in pink.

[00:12:57]
This can be changed to orange, right? This can be changed to dotted or line. I don't know. There's a bunch of other, was line working? No it wasn't. Dashed, there it is. So there's a bunch of way of doing borders. Let's go back to. Oops, just refresh the page.

[00:13:30]
You can come in here and say border dash radius and say five pixels. Notice there that makes it like a nice little rounded corner there. Or we can put 15 pixels it gets even more rounded. 100 pixels and then it just ends up being round at the end, right?

[00:13:46]
So you can do anything you want with CSS. You can take things that look one way and make them look another way. And it's all just like this combination of making these selectors with rules with all these properties that kind of interact with each other to create whatever you're trying to make happen.

[00:14:05]
A question that I had when I was learning to code is why is it font dash something sometimes and why is it text dash something other times? Well, one it is because it is. But the real answer to that is think about the font, right? So when you're on Word, you can select a different font, right?

[00:14:24]
You're actually changing character sets. So that's what font is it's actually messing with the character set that the glyphs that you're interacting with. Whereas the text stuff actually just interacts with the text itself, it doesn't mess with the glyph set, right? So when I underlined something, it doesn't modify the glyphs set.

[00:14:42]
It's just drawing a line underneath it and I'm transforming the text from lowercase to uppercase, but doesn't matter if the glyph says changes which glyph it's showing. You never have to care about that. That was something that bothered me for years after I learned to write CSS, and I finally bothered to look it up once time.

[00:15:02]
So I try and throw little tidbits in there of things that used to bother me so they don't have to bother you. So yeah, parents and children. I have div here and I have a selector here that says div, color, blue. That'll actually permeate down here to the children.

[00:15:18]
So you can have parents CSS affect children. I found that frustrated me when I was learning to code is like, why is this one blue and it's because I had a parent that was permeating it's CSS cascading down to the child. So, you'll notice I use some terminology here for parents and child.

[00:15:39]
The parent will be the outer the HTML tag and the child will be the inner HTML tag. That's common terminology when talking about HTML. So even if I do body here and I have this h1 here, that's all the way nested down, this the body color orange will permeate all the way down here to this h1, right?

[00:16:03]
It just affects everything inside of it.