Introduction to Web Development CSS Shortcuts

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

[00:00:03]
>> Brian Holt: Let's just open another CodePen right now. codepen.io, just kinda wing this. All right, so we're gonna have a div here. In case you're wondering, I do lotsof shortcuts cuz it's just like second html's. So right now I just wrote div. Your browser is aware of which one, it's like waiting to close.

[00:00:32] So if you hit, I don't know how to do this in Windows so I apologize in advance. So if you hit option, command, period it'll close whatever tag you currently have open. And that's a little trick or like I was showing them earlier with Emmit you can just hit tab.

[00:00:50] You can type out whatever the tab name is and hit tab and it'll also make it as well. Just fun little tricks. All right so we're gonna do a div rule, okay. It's gonna have a height of 100px and a width of 200px. And we'll just give it a border 2px solid red, right?

[00:01:16] Okay, so now we have this box that we can start toying around with. Okay, we also talked a little bit about border box, so you're wondering how you actually do that, so let's just do that real quick. You just do box, sizing, border, box. Border fox. Ha, what does the border box say?

[00:01:43]
>> Brian Holt: Okay, cool. So that asterisk right there means apply this to all of everything, right. Apply this to everything on my page. I would recommend never using it except in this one use case. [LAUGH] Right. This will make everything into the border-box frame of mind instead of the content box which is the old way and it's awful and don't do it.

[00:02:09] But just grab this snippet and just throw it on every page that you work on. That's just my suggestion.
>> Brian Holt: Okay, so there are shortcuts for lots of things. For example, I can say margin, top 10 pixels, right? Or let's maybe do 50 pixels so it's a little bit more pronounced.

[00:02:39] Okay, and notice it's moving down the page a little bit. We'll just do a background color of orange or something like that. I'm a designer, I make pretty things. Okay, so we have margin top right now and you can do that, and you can say margin-left 200 pixels.

[00:03:07] It's going to move it in 200 pixels. And let's just put some text in here. I am here. Right, so now it's going to have a little text in here. Right like I don't like that it pushes right up against this so I can say padding, top, 50 pixels, right?

[00:03:28]
>> Speaker 2: Can you make the CSS so it shows the top?
>> Brian Holt: Yeah, I could just close this one out. That's just going to have div in the syntax, so that's all that's gonna be. Okay so padding-top is now moving it down 50px or 30px or something like that, okay.

[00:03:50] So as you notice if I have to add margins at the top, to the left to the right to the bottom it's for both, right. So I have to write four lines of it. So they've made it easy and lazy for you. So, let's just do that really quick.

[00:04:04] So, you can just say margin right? And let's say I want to have the same margin on my left and on my right, and I want to have the same margin on my top and bottom, wich is a really use case, top and bottom have the same margin and left and right have the same margin.

[00:04:18] So if I say 10 px, 20 px. Let's do 10 px, 200 px so it's really pronounced, right? 10 px is going to be top and bottom, 200px is going to be left and right. Or, if I just delete it. Then it's all sides. All sides now all have a margin of 200 pixels.

[00:04:47] [COUGH] Where'd it go?
>> Brian Holt: Maybe 100 pixels.
>> Brian Holt: That's interesting.
>> Brian Holt: There it goes, just took awhile, all right. Okay, so, it's because the server's taking a long time, that's why. Okay, so but that's what that margin does, right. It's saying, if you have one number. It knows, okay, apply this to all sides.

[00:05:25] If you have two numbers, it says top and bottom, left and right. There is a way to do three numbers. Don't worry about it because no one ever does three numbers. But there's one for four numbers. That's top, right, bottom, left, which would be opposite for you. Right, but if I say 50 pixels, 20 pixels, 30 pixels, top is 50 pixels, right is 10 pixels, bottom is 20 pixels and left is 30 pixels.

[00:05:57] It's just short hand, if it's super confusing for you don't use it, right, just write it out and that's totally fine. But just be aware like that's, that exists, that's what's happening. You'll probably eventually get to a point where you just wanna do it because you're lazy like me.

[00:06:15] So that applies to margin, that applies to padding. Padding works exactly the same way. There's a bunch of little shorthand stuff for it. In fact we can do that if you want. Padding, we'll just do 10 pixels, 20 pixels, right and then now we'll have that. Top and bottom 10 pixels, left and right 20 pixels.

[00:06:39]
>> Brian Holt: Questions about that?
>> Speaker 2: The star, sorry, is that just a unix star where it's saying everything?
>> Brian Holt: Yep, wild card, is what it's called. It just means apply this to everything on the page, every element that ever put on the page, put a box size and border box on it and I will again just recommend putting on every CSS you do.

[00:07:06] It'll make your life a lot easier. And again I would not recommend it for anything else. Like, for example, if you wanted all of your text to have a different font or something like that I would recommend putting that on body as opposed to the wild card. And say font-family which is what you do if you wanna change fonts and you can say monospace or something like that.

[00:07:32] Change the font to Verdana or something like that.
>> Brian Holt: Something like that.