CSS3 Tutorial for Beginners: 21 CSS Box Model (Part 2) – Practicing [w/ subs]



00:00:00 – hey this is Sasha and thanks for joining
00:00:01 – me here for another CSS training video
00:00:04 – and today I want to cover the box model
00:00:07 – this is part two of the box model so
00:00:09 – this way it helps you understand more
00:00:11 – about editing your business website so
00:00:14 – let's take a look at part two alright so
00:00:21 – we've already covered the basics in part
00:00:23 – one of the box model if you haven't seen
00:00:25 – it make sure you go back and check it
00:00:27 – out so here I have a basic box already
00:00:29 – set up now here's the thing is normally
00:00:32 – these are aligned to the left now what
00:00:34 – happens if you want to center a line
00:00:36 – there's no real property to let's just
00:00:39 – say center or a line if you do alignment
00:00:44 – you can see that there is no alignment
00:00:47 – of center there's a vertical align
00:00:49 – there's a text align but even if I do
00:00:50 – text align center watch what happens I
00:00:53 – mean it just kind of aligns the text in
00:00:55 – the center there doesn't align the box
00:00:57 – to the middle of the content so what I
00:01:00 – want to do is in fact if you take a look
00:01:03 – at this margin what you can do is you
00:01:06 – margin right and then you do auto and
00:01:09 – margin left and we do auto okay so what
00:01:14 – you can do then is you'll see if I hit
00:01:16 – refresh you can see that this box now is
00:01:19 – aligned in the center between this and
00:01:22 – this and we also have our width that we
00:01:26 – wanted right there in 320 pixels so
00:01:30 – that's how you get exact and precise
00:01:32 – alignment with the width now you could
00:01:35 – shorthand this which again will talk
00:01:36 – about here in a little bit but you could
00:01:39 – do margin of something like this let's
00:01:42 – say 25 pixels and then auto because now
00:01:45 – it gives top right bottom and left or
00:01:48 – top right bottom left depending on how
00:01:50 – you're looking at it so at the top we
00:01:54 – have 25 pixels on the right we have an
00:01:56 – auto on the bottom we have again 25
00:01:59 – pixels and on the left we also have auto
00:02:01 – so this basically creates a very similar
00:02:03 – kind of concept which you can do some
00:02:05 – shorthand things with which we'll talk
00:02:07 – about in the next video but that's
00:02:09 – ultimately how you align these elements
00:02:11 – on
00:02:13 – within the other elements or within your
00:02:16 – page so even if you have let's say five
00:02:18 – hundred twenty pixels you can see it's
00:02:19 – wider but it's still align Center and
00:02:21 – you do that through that margin property
00:02:24 – by assigning an auto margin thanks for
00:02:28 – hanging out with me and learning I hope
00:02:30 – you found this video helpful and if you
00:02:32 – did remember to hit the subscribe button
00:02:34 – right here or best of all get on my
00:02:36 – newsletter list by clicking this button
00:02:38 – right here when you're on the newsletter
00:02:39 – list that's where I share all the
00:02:41 – exclusive video trainings and you can
00:02:43 – even get discounts or promotions to some
00:02:45 – of the video courses that I create so
00:02:47 – get on the newsletter list by clicking
00:02:48 – this button up here thanks again and
00:02:50 – hope to see you in the next video


Video Url:
http://youtu.be/VJ3qv5HcACA

Comments

comments