[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.50,Default,,0000,0000,0000,,You know how we made something that
Dialogue: 0,0:00:02.54,0:00:04.58,Default,,0000,0000,0000,,looked like a box in the last
Dialogue: 0,0:00:04.59,0:00:06.83,Default,,0000,0000,0000,,talk-through by making this `div` and then
Dialogue: 0,0:00:06.91,0:00:08.35,Default,,0000,0000,0000,,giving it a `background-color`?
Dialogue: 0,0:00:08.35,0:00:10.86,Default,,0000,0000,0000,,Well, actually, every element on your
Dialogue: 0,0:00:10.86,0:00:12.73,Default,,0000,0000,0000,,webpage is considered a box
Dialogue: 0,0:00:12.73,0:00:15.15,Default,,0000,0000,0000,,by the browser, whether or not it looks
Dialogue: 0,0:00:15.15,0:00:18.35,Default,,0000,0000,0000,,like a box to you. This heading is a box..
Dialogue: 0,0:00:18.35,0:00:22.13,Default,,0000,0000,0000,,this paragraph is a box..even this `span`
Dialogue: 0,0:00:22.13,0:00:25.18,Default,,0000,0000,0000,,that we made is a box. Some of the boxes
Dialogue: 0,0:00:25.18,0:00:29.69,Default,,0000,0000,0000,,are big, some are small, some are in line
Dialogue: 0,0:00:29.69,0:00:32.84,Default,,0000,0000,0000,,like the `span`, some are block, like the
Dialogue: 0,0:00:32.84,0:00:35.71,Default,,0000,0000,0000,,`div`. But they're all considered boxes.
Dialogue: 0,0:00:35.71,0:00:38.76,Default,,0000,0000,0000,,Why does this matter? 'Cause there's
Dialogue: 0,0:00:38.76,0:00:41.05,Default,,0000,0000,0000,,something called the "box model," which
Dialogue: 0,0:00:41.08,0:00:44.10,Default,,0000,0000,0000,,you can see in the diagram I just
Dialogue: 0,0:00:44.10,0:00:46.03,Default,,0000,0000,0000,,pasted in. Every element's box has four
Dialogue: 0,0:00:46.03,0:00:48.51,Default,,0000,0000,0000,,parts: the actual content, the padding,
Dialogue: 0,0:00:48.52,0:00:52.36,Default,,0000,0000,0000,,the border, and the margin. We can use CSS
Dialogue: 0,0:00:52.36,0:00:54.44,Default,,0000,0000,0000,,to modify the padding, border, and margin.
Dialogue: 0,0:00:54.44,0:00:56.51,Default,,0000,0000,0000,,So you'll understand soon what those
Dialogue: 0,0:00:56.51,0:00:59.18,Default,,0000,0000,0000,,really are. Let's start with the margin.
Dialogue: 0,0:00:59.18,0:01:01.66,Default,,0000,0000,0000,,That's the transparent area around the box
Dialogue: 0,0:01:01.67,0:01:03.82,Default,,0000,0000,0000,,that separates the box from other
Dialogue: 0,0:01:03.82,0:01:06.74,Default,,0000,0000,0000,,elements. We'll specify margin using our
Dialogue: 0,0:01:06.75,0:01:10.17,Default,,0000,0000,0000,,favorite unit: pixels. To add 15 pixels
Dialogue: 0,0:01:10.17,0:01:12.80,Default,,0000,0000,0000,,of margin on every side of the official
Dialogue: 0,0:01:12.80,0:01:16.80,Default,,0000,0000,0000,,info box, we can just write: `margin:
Dialogue: 0,0:01:16.85,0:01:22.28,Default,,0000,0000,0000,,15px;`. So, you see the change that made?
Dialogue: 0,0:01:22.31,0:01:25.03,Default,,0000,0000,0000,,What if we want a different amount of
Dialogue: 0,0:01:25.03,0:01:27.24,Default,,0000,0000,0000,,margin on each side? Like more on the
Dialogue: 0,0:01:27.24,0:01:29.65,Default,,0000,0000,0000,,top-bottom than the left-right? We can
Dialogue: 0,0:01:29.65,0:01:31.57,Default,,0000,0000,0000,,write those amounts in clockwise order,
Dialogue: 0,0:01:31.64,0:01:36.60,Default,,0000,0000,0000,,starting from the top. So top 15px, right
Dialogue: 0,0:01:36.60,0:01:43.98,Default,,0000,0000,0000,,0px, bottom 10px, left 6px. OR, we could
Dialogue: 0,0:01:43.98,0:01:46.36,Default,,0000,0000,0000,,use specific properties for each side, but
Dialogue: 0,0:01:46.36,0:01:48.81,Default,,0000,0000,0000,,we only wanna specify a few sides. Like if
Dialogue: 0,0:01:48.81,0:01:51.06,Default,,0000,0000,0000,,we want to have some space around the cat
Dialogue: 0,0:01:51.08,0:01:56.75,Default,,0000,0000,0000,,picture, on the right..and then, we also
Dialogue: 0,0:01:56.76,0:02:01.30,Default,,0000,0000,0000,,just want some on the bottom...and we're
Dialogue: 0,0:02:01.30,0:02:03.79,Default,,0000,0000,0000,,happy to have the default margin for the
Dialogue: 0,0:02:03.79,0:02:06.74,Default,,0000,0000,0000,,other sides. There's also a special value
Dialogue: 0,0:02:06.74,0:02:08.64,Default,,0000,0000,0000,,for margin that'll help us do something
Dialogue: 0,0:02:08.64,0:02:11.00,Default,,0000,0000,0000,,fancy with our pages. To show you that,
Dialogue: 0,0:02:11.00,0:02:14.23,Default,,0000,0000,0000,,I'm gonna add a `div` around the entire
Dialogue: 0,0:02:14.23,0:02:17.46,Default,,0000,0000,0000,,page. I'll give it an ID of "container."
Dialogue: 0,0:02:17.46,0:02:21.39,Default,,0000,0000,0000,,Let's put this ta-a-a-ag here, so it
Dialogue: 0,0:02:21.39,0:02:25.95,Default,,0000,0000,0000,,contains everything. Now, gonna add a rule
Dialogue: 0,0:02:25.95,0:02:29.37,Default,,0000,0000,0000,,for that `div` to give it a width of 400
Dialogue: 0,0:02:29.37,0:02:33.81,Default,,0000,0000,0000,,px, and I wanna center it on the page. I
Dialogue: 0,0:02:33.81,0:02:37.74,Default,,0000,0000,0000,,COULD specify a `margin-left: 100px;`,
Dialogue: 0,0:02:37.74,0:02:40.75,Default,,0000,0000,0000,,because that looks centered to me, but it
Dialogue: 0,0:02:40.75,0:02:42.58,Default,,0000,0000,0000,,may not be centered to you, because your
Dialogue: 0,0:02:42.59,0:02:45.07,Default,,0000,0000,0000,,browser may be bigger or smaller. What we
Dialogue: 0,0:02:45.08,0:02:46.78,Default,,0000,0000,0000,,want is to be able to say, "give it
Dialogue: 0,0:02:46.86,0:02:49.28,Default,,0000,0000,0000,,however much margin it needs so that it's
Dialogue: 0,0:02:49.28,0:02:52.82,Default,,0000,0000,0000,,got equal margin on both sides." That is
Dialogue: 0,0:02:52.82,0:02:56.34,Default,,0000,0000,0000,,exactly what `margin: auto;` does. And
Dialogue: 0,0:02:56.34,0:02:57.84,Default,,0000,0000,0000,,it's a great way to center `div`s on a
Dialogue: 0,0:02:57.84,0:03:01.47,Default,,0000,0000,0000,,page. Now that we've centered that `div`,
Dialogue: 0,0:03:01.47,0:03:04.01,Default,,0000,0000,0000,,we might wanna make it even more distinct
Dialogue: 0,0:03:04.02,0:03:06.30,Default,,0000,0000,0000,,by adding a border around the edge of it
Dialogue: 0,0:03:06.33,0:03:10.33,Default,,0000,0000,0000,,using the CSS border property. Let's add a
Dialogue: 0,0:03:10.36,0:03:13.48,Default,,0000,0000,0000,,red border to that `div`. We type
Dialogue: 0,0:03:13.48,0:03:15.28,Default,,0000,0000,0000,,"border:," and then we just need to
Dialogue: 0,0:03:15.28,0:03:16.94,Default,,0000,0000,0000,,specify three aspects of the border:
Dialogue: 0,0:03:16.94,0:03:19.78,Default,,0000,0000,0000,,thickness, style, and color. For a thin
Dialogue: 0,0:03:19.78,0:03:23.47,Default,,0000,0000,0000,,border, I'll just type "1px," uh, for a
Dialogue: 0,0:03:23.47,0:03:25.63,Default,,0000,0000,0000,,solid line, nothing fancy, we'll just
Dialogue: 0,0:03:25.64,0:03:28.97,Default,,0000,0000,0000,,type "solid," and...to make it red I'll
Dialogue: 0,0:03:28.97,0:03:31.65,Default,,0000,0000,0000,,just pop up my R G B color picker and pick
Dialogue: 0,0:03:31.65,0:03:37.77,Default,,0000,0000,0000,,a nice...fiery red. Okay. Just like with
Dialogue: 0,0:03:37.77,0:03:39.92,Default,,0000,0000,0000,,margin, we can specify the border for
Dialogue: 0,0:03:39.92,0:03:42.79,Default,,0000,0000,0000,,just, like, one side. Like if we want a
Dialogue: 0,0:03:42.80,0:03:46.08,Default,,0000,0000,0000,,REALLY thick purple border on the top,
Dialogue: 0,0:03:46.08,0:03:49.24,Default,,0000,0000,0000,,we'll add another property. "border-top:
Dialogue: 0,0:03:49.25,0:03:56.54,Default,,0000,0000,0000,,10px solid purple;." Cool! Now, let's add
Dialogue: 0,0:03:56.54,0:03:59.78,Default,,0000,0000,0000,,a frame to the image. and play around with
Dialogue: 0,0:03:59.78,0:04:02.22,Default,,0000,0000,0000,,border styles. So going up to our
Dialogue: 0,0:04:02.22,0:04:07.60,Default,,0000,0000,0000,,"cute-cat," uh, let's see, "border: 6px,"
Dialogue: 0,0:04:07.60,0:04:12.98,Default,,0000,0000,0000,,let's try "groove red." Okay. Now I don't
Dialogue: 0,0:04:12.98,0:04:16.40,Default,,0000,0000,0000,,like groove, let's try "double?" Eh, let's
Dialogue: 0,0:04:16.40,0:04:19.18,Default,,0000,0000,0000,,try "ridge." Ah-ha! Now that looks like a
Dialogue: 0,0:04:19.18,0:04:22.66,Default,,0000,0000,0000,,frame. Now how about a border around our
Dialogue: 0,0:04:22.66,0:04:25.98,Default,,0000,0000,0000,,official info? Uh, let's see, "border:,"
Dialogue: 0,0:04:25.98,0:04:28.40,Default,,0000,0000,0000,,let's not make it too big, "2px," let's
Dialogue: 0,0:04:28.40,0:04:31.18,Default,,0000,0000,0000,,try "dotted" and then, uh, let's pick an,
Dialogue: 0,0:04:31.20,0:04:35.96,Default,,0000,0000,0000,,uh, just a subtle gray, uh, lemme try
Dialogue: 0,0:04:35.96,0:04:38.23,Default,,0000,0000,0000,,"dashed" instead. Okay, that - that's what
Dialogue: 0,0:04:38.24,0:04:40.96,Default,,0000,0000,0000,,I want. Now with all these borders,
Dialogue: 0,0:04:40.96,0:04:42.44,Default,,0000,0000,0000,,something is bothering me a little.
Dialogue: 0,0:04:42.44,0:04:45.02,Default,,0000,0000,0000,,Actually, something is bothering me a LOT.
Dialogue: 0,0:04:45.02,0:04:48.88,Default,,0000,0000,0000,,See how the text is butting up next to the
Dialogue: 0,0:04:48.88,0:04:51.63,Default,,0000,0000,0000,,border in the "container?" And - and
Dialogue: 0,0:04:51.63,0:04:53.44,Default,,0000,0000,0000,,butting against the text in the official
Dialogue: 0,0:04:53.44,0:04:56.52,Default,,0000,0000,0000,,info? That's so gross-looking, and it
Dialogue: 0,0:04:56.52,0:04:59.74,Default,,0000,0000,0000,,makes it harder to read the text. THAT is
Dialogue: 0,0:04:59.74,0:05:02.20,Default,,0000,0000,0000,,where padding comes in. Whenever your
Dialogue: 0,0:05:02.20,0:05:03.78,Default,,0000,0000,0000,,elements have `background-color`s or
Dialogue: 0,0:05:03.78,0:05:05.39,Default,,0000,0000,0000,,`border`s, you almost ALWAYS want to add
Dialogue: 0,0:05:05.39,0:05:07.63,Default,,0000,0000,0000,,padding, to put a bit of space between the
Dialogue: 0,0:05:07.63,0:05:10.09,Default,,0000,0000,0000,,contents and the edges. Let's add some
Dialogue: 0,0:05:10.11,0:05:13.30,Default,,0000,0000,0000,,padding to the "container," just...let's
Dialogue: 0,0:05:13.32,0:05:17.98,Default,,0000,0000,0000,,do 15px all around the container. Oh. So
Dialogue: 0,0:05:17.99,0:05:21.24,Default,,0000,0000,0000,,much better. Uh, let's add...let's add
Dialogue: 0,0:05:21.24,0:05:23.37,Default,,0000,0000,0000,,some padding to our official info, let's
Dialogue: 0,0:05:23.37,0:05:27.88,Default,,0000,0000,0000,,see: "padding: 6px," oh, beautiful. Now,
Dialogue: 0,0:05:27.88,0:05:29.36,Default,,0000,0000,0000,,we don't need to add padding to the image,
Dialogue: 0,0:05:29.36,0:05:31.00,Default,,0000,0000,0000,,since images actually look good inside
Dialogue: 0,0:05:31.01,0:05:33.85,Default,,0000,0000,0000,,frames like that. And there you have it:
Dialogue: 0,0:05:33.85,0:05:36.18,Default,,0000,0000,0000,,the box model. Margin, border, and
Dialogue: 0,0:05:36.18,0:05:38.36,Default,,0000,0000,0000,,padding. I used big values and bright
Dialogue: 0,0:05:38.36,0:05:40.39,Default,,0000,0000,0000,,colors to show them off to you, but my
Dialogue: 0,0:05:40.39,0:05:42.94,Default,,0000,0000,0000,,page DOES look a bit cheesy now. If you
Dialogue: 0,0:05:42.96,0:05:44.27,Default,,0000,0000,0000,,want your page to look sleek and
Dialogue: 0,0:05:44.27,0:05:46.69,Default,,0000,0000,0000,,sophisticated, try using more subtle
Dialogue: 0,0:05:46.69,0:05:49.12,Default,,0000,0000,0000,,whites and grays. Whatever you do, make
Dialogue: 0,0:05:49.12,0:05:50.87,Default,,0000,0000,0000,,sure you use these properties, because
Dialogue: 0,0:05:50.87,0:05:52.71,Default,,0000,0000,0000,,they'll have a big effect on how your page
Dialogue: 0,0:05:52.00,0:05:53.72,Default,,0000,0000,0000,,looks and feels.