Hello, in this CSS Crash Course video, we're going to be looking at shorthand properties. And shorthand properties are literally just what they say on the tin. It's properties that you can use shorthand or when we're looking at margin, border and font. But there are other shorthand properties as well. So the first thing we're going to do that in index was gonna come to disable this. There's no particular reason it's just a styling that wouldn't be sorely conflicting with in terms of the look so best.
Leave this as it is. So first of all, let's go into the HTML. So I'm going to create a div and this is going to have an ID of div one. Copy, paste that code Paste it again. And again. And again, take a five instances of it, change the ID to see where I'm going with this a three d four and then do five.
And then in foid, first import some random text. What I'm going to do is, yeah, and same with the last one as well. So let's just indent this. Save the, save it, save it, refresh, and you see we got five lines of text and they all look the same. So now let's go to our CSS file. Hash, Dave one.
Let's see the second the first line of text will interpret margin dash talk hold on 190 pixels margin. dash bottom 100 pixels, margin dash five pixels 600 pixels. So now let's do div to action before we did this, save that refresh. As you can see, we now have this right here. This is quite a lot to do. So there is a shorthand property.
So if you were to just do margin polling, if I were to just call one value hundred and pick 100 pixels, this applies 100 pixels to the left to the right to the bottom and to the top. That's fine. You might want even padding or margins, sorry, we're doing margin by applies padding as well. But you may know you may want four different sets of pattern to do that if you pull from groups 90 pixels. So this first value affects the top value. It's basically in this exact order.
That's the reason I wrote in this order. So you can click and just read and see, the next value affects the right margin. Next value affects the bottom margin and then the final value effects the left margin so far save that refresh. It looks pretty, it looks exactly the same. And the reason is, because it is it is now using the exact same styling but using a shorthand property. Let me show you a another shorthand way of doing this.
So if I were to just delete this for a second, if I put margin hold on 70 pixels 45 pixels, save that refresh, as you can see, supplied some margin. The first value employs 50 pixels to the top and to the bottom, then the second Want to upload it to the right and to the left out 45 pixels. That's a great way of affecting two different pairs. So if you know the bottom, the top is on the same, the left and the right we're gonna say this is a shorter way of doing it than just opt in like this. I'm just gonna switch you back to the way it was. The next one we're going to be looking at is hash.
Free. And for this we're going to be looking at border properties and border dash with this is what we usually doing borders. pixels for the width for the color, border color blue. And then we put something like border or your for this, we'll put some.to seven colons, save that refresh. We've got this result, yeah. As you can get a shorthand way of doing this, you could do for if you put something like border, colon boy pixels, so this affects the web.
Then the color, and then the style. So save that refresh, you know what if I go into my index file in between these two, bright line just so I can see that they are exactly the same, but this one is the shorthand property. Once you get the hand, the hang of shorthand property, you'll be using them a lot because they do save you a lot of time. So the final only limit looking at a div. For this we're going to put font a font that style or find a way to find us size or anything like that. board is simple font code on it tallix.
So we're setting the actual sort of style, allow font and then we're going to set the weight sois and then the font family we've all done it in one now you probably commonly see it like this when you get source code off the internet and just other tutorials. In general, so that's basically what it's saying. Save that refresh. And as you can see, it has now modified it using one single shorthand property. So that's it short on properties. If you have any questions, feel free to post them on my education platform, sonar learning Dakota, UK, there will be a link attached to this video as a resource which will take you to all the source code from the theories below the video, please let us know if you didn't pay those know as well so we can prove it for next time.
And as usual, thanks for watching and I hope you have a great day.