[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.36,0:00:02.03,Default,,0000,0000,0000,,So far we've seen how you can
Dialogue: 0,0:00:02.03,0:00:03.59,Default,,0000,0000,0000,,use CSS to style your text,
Dialogue: 0,0:00:04.09,0:00:05.90,Default,,0000,0000,0000,,but we can also use CSS to completely
Dialogue: 0,0:00:05.90,0:00:07.50,Default,,0000,0000,0000,,change the layout of our page.
Dialogue: 0,0:00:07.62,0:00:09.15,Default,,0000,0000,0000,,That means we can move things around,
Dialogue: 0,0:00:09.16,0:00:10.19,Default,,0000,0000,0000,,change the size,
Dialogue: 0,0:00:10.19,0:00:11.78,Default,,0000,0000,0000,,even put things on top of each other.
Dialogue: 0,0:00:12.01,0:00:13.55,Default,,0000,0000,0000,,But what are the things
Dialogue: 0,0:00:13.55,0:00:14.40,Default,,0000,0000,0000,,we want to move around?
Dialogue: 0,0:00:14.50,0:00:16.12,Default,,0000,0000,0000,,Sometimes they're elements
Dialogue: 0,0:00:16.12,0:00:17.34,Default,,0000,0000,0000,,that we've already made,
Dialogue: 0,0:00:17.34,0:00:18.81,Default,,0000,0000,0000,,like a certain paragraph,
Dialogue: 0,0:00:18.81,0:00:20.67,Default,,0000,0000,0000,,or a certain heading.
Dialogue: 0,0:00:21.23,0:00:22.36,Default,,0000,0000,0000,,But often times,
Dialogue: 0,0:00:22.44,0:00:24.68,Default,,0000,0000,0000,,they're a group of elements that we've made,
Dialogue: 0,0:00:24.68,0:00:26.89,Default,,0000,0000,0000,,like a selection of text,
Dialogue: 0,0:00:27.06,0:00:30.06,Default,,0000,0000,0000,,or a heading and a few paragraphs.
Dialogue: 0,0:00:31.69,0:00:32.95,Default,,0000,0000,0000,,In order to move them
Dialogue: 0,0:00:32.95,0:00:34.36,Default,,0000,0000,0000,,around together as a unit,
Dialogue: 0,0:00:34.36,0:00:36.78,Default,,0000,0000,0000,,we need to introduce two new HTML tags.
Dialogue: 0,0:00:36.80,0:00:39.22,Default,,0000,0000,0000,,Which we call the grouping elements.
Dialogue: 0,0:00:39.25,0:00:41.46,Default,,0000,0000,0000,,We didn't talk about them before CSS,
Dialogue: 0,0:00:41.46,0:00:42.66,Default,,0000,0000,0000,,because they're only useful
Dialogue: 0,0:00:42.66,0:00:44.21,Default,,0000,0000,0000,,when combined with CSS.
Dialogue: 0,0:00:44.21,0:00:46.56,Default,,0000,0000,0000,,They have no semantic meaning to the browser.
Dialogue: 0,0:00:47.28,0:00:49.18,Default,,0000,0000,0000,,The first tag, is the  tag,
Dialogue: 0,0:00:49.60,0:00:51.52,Default,,0000,0000,0000,,and it's what we use for grouping
Dialogue: 0,0:00:51.52,0:00:52.76,Default,,0000,0000,0000,,a selection of text.
Dialogue: 0,0:00:53.24,0:00:54.19,Default,,0000,0000,0000,,Let's say we want a colour,
Dialogue: 0,0:00:54.19,0:00:56.50,Default,,0000,0000,0000,,that's word "Love Red".
Dialogue: 0,0:00:57.06,0:00:58.69,Default,,0000,0000,0000,,And we just want to colour the word,
Dialogue: 0,0:00:58.69,0:00:59.95,Default,,0000,0000,0000,,not the rest of the heading.
Dialogue: 0,0:01:00.33,0:01:02.46,Default,,0000,0000,0000,,We'll put our cursor before "Love",
Dialogue: 0,0:01:02.46,0:01:06.14,Default,,0000,0000,0000,,type the start tag for .
Dialogue: 0,0:01:06.50,0:01:10.52,Default,,0000,0000,0000,,Put it after, type the end tag, okay.
Dialogue: 0,0:01:10.68,0:01:11.64,Default,,0000,0000,0000,,Now we want to style this
Dialogue: 0,0:01:11.64,0:01:12.81,Default,,0000,0000,0000,, of characters.
Dialogue: 0,0:01:13.01,0:01:14.64,Default,,0000,0000,0000,,We could make a rule to colour all s
Dialogue: 0,0:01:14.72,0:01:15.68,Default,,0000,0000,0000,,on the page,
Dialogue: 0,0:01:15.78,0:01:18.56,Default,,0000,0000,0000,,but we may not want them all to be red.
Dialogue: 0,0:01:18.56,0:01:19.98,Default,,0000,0000,0000,,Let's give the  a
Dialogue: 0,0:01:20.11,0:01:21.98,Default,,0000,0000,0000,,class of "lovey-dovey",
Dialogue: 0,0:01:25.09,0:01:29.05,Default,,0000,0000,0000,,and add a rule just for elements that
Dialogue: 0,0:01:29.05,0:01:30.37,Default,,0000,0000,0000,,have the class "lovey-dovey".
Dialogue: 0,0:01:30.39,0:01:33.76,Default,,0000,0000,0000,,So, .lovey-dovey, color: red.
Dialogue: 0,0:01:34.61,0:01:36.70,Default,,0000,0000,0000,,Look at how lovey dovey that text is now!
Dialogue: 0,0:01:38.09,0:01:39.67,Default,,0000,0000,0000,,So s are good for grouping
Dialogue: 0,0:01:39.67,0:01:41.72,Default,,0000,0000,0000,,selections of text, how do we group a
Dialogue: 0,0:01:41.73,0:01:43.19,Default,,0000,0000,0000,,bunch of elements together?
Dialogue: 0,0:01:43.51,0:01:45.25,Default,,0000,0000,0000,,That's where the  tag comes in.
Dialogue: 0,0:01:45.68,0:01:46.75,Default,,0000,0000,0000,,Let's say we want to group
Dialogue: 0,0:01:46.75,0:01:47.72,Default,,0000,0000,0000,,this bottom section.
Dialogue: 0,0:01:48.20,0:01:49.46,Default,,0000,0000,0000,,The official info header, and
Dialogue: 0,0:01:49.46,0:01:51.17,Default,,0000,0000,0000,,the paragraphs and picture below it.
Dialogue: 0,0:01:51.74,0:01:52.71,Default,,0000,0000,0000,,To do that,
Dialogue: 0,0:01:52.71,0:01:58.13,Default,,0000,0000,0000,,I'll put my cursor before the h3 and do
Dialogue: 0,0:01:58.13,0:01:59.39,Default,,0000,0000,0000,,the start tag for .
Dialogue: 0,0:01:59.86,0:02:02.26,Default,,0000,0000,0000,,And then go down to the final paragraph,
Dialogue: 0,0:02:02.69,0:02:04.62,Default,,0000,0000,0000,,and right the end tag for .
Dialogue: 0,0:02:05.47,0:02:07.85,Default,,0000,0000,0000,,We have a , now we need to style it.
Dialogue: 0,0:02:08.51,0:02:09.57,Default,,0000,0000,0000,,To style the ,
Dialogue: 0,0:02:09.57,0:02:11.43,Default,,0000,0000,0000,,I'm going to give it an ID.
Dialogue: 0,0:02:11.43,0:02:13.52,Default,,0000,0000,0000,,"official-info".
Dialogue: 0,0:02:15.12,0:02:16.42,Default,,0000,0000,0000,,Then add a rule for it up here.
Dialogue: 0,0:02:16.42,0:02:21.10,Default,,0000,0000,0000,,So #official-info, and background.
Dialogue: 0,0:02:22.28,0:02:23.72,Default,,0000,0000,0000,,Let's make it a nice grey.
Dialogue: 0,0:02:23.88,0:02:26.93,Default,,0000,0000,0000,,Let's pick out... this... That's good.
Dialogue: 0,0:02:27.13,0:02:28.65,Default,,0000,0000,0000,,So now you can see the  has become
Dialogue: 0,0:02:28.65,0:02:30.84,Default,,0000,0000,0000,,a grey box containing all of the elements
Dialogue: 0,0:02:30.84,0:02:31.68,Default,,0000,0000,0000,,inside of it.
Dialogue: 0,0:02:31.77,0:02:34.27,Default,,0000,0000,0000,,And it's different from if we give each of
Dialogue: 0,0:02:34.27,0:02:35.95,Default,,0000,0000,0000,,them a grey background separately.
Dialogue: 0,0:02:35.100,0:02:38.23,Default,,0000,0000,0000,,If we did that, there would be a space in
Dialogue: 0,0:02:38.23,0:02:39.31,Default,,0000,0000,0000,,between them that wouldn't go gray.
Dialogue: 0,0:02:39.52,0:02:41.12,Default,,0000,0000,0000,,We have to make a ,
Dialogue: 0,0:02:41.13,0:02:42.91,Default,,0000,0000,0000,,if we want a box around everything.
Dialogue: 0,0:02:44.71,0:02:46.18,Default,,0000,0000,0000,,You can think of ,
Dialogue: 0,0:02:46.18,0:02:47.74,Default,,0000,0000,0000,,as being for grouping text.
Dialogue: 0,0:02:48.30,0:02:50.76,Default,,0000,0000,0000,,And you can think of ,
Dialogue: 0,0:02:50.76,0:02:52.27,Default,,0000,0000,0000,,for grouping elements.
Dialogue: 0,0:02:52.48,0:02:54.72,Default,,0000,0000,0000,,But there's another way to distinguish them as well.
Dialogue: 0,0:02:55.45,0:02:56.85,Default,,0000,0000,0000,,You see there are two types
Dialogue: 0,0:02:56.85,0:02:58.10,Default,,0000,0000,0000,,of elements in the CSS world.
Dialogue: 0,0:02:58.41,0:03:00.23,Default,,0000,0000,0000,,Inline and block.
Dialogue: 0,0:03:00.50,0:03:03.41,Default,,0000,0000,0000,,An inline element does not have a new line after it.
Dialogue: 0,0:03:03.57,0:03:06.73,Default,,0000,0000,0000,,Like if you make a multiple of them they will all be on the same line.
Dialogue: 0,0:03:06.73,0:03:08.75,Default,,0000,0000,0000,,A few examples we have talked about are
Dialogue: 0,0:03:08.75,0:03:11.65,Default,,0000,0000,0000,,a and image.
Dialogue: 0,0:03:11.83,0:03:13.43,Default,,0000,0000,0000,,And you can see with this image,
Dialogue: 0,0:03:13.45,0:03:16.43,Default,,0000,0000,0000,,how it just runs into the text next to it.
Dialogue: 0,0:03:16.62,0:03:18.33,Default,,0000,0000,0000,,There's no new line after it.
Dialogue: 0,0:03:18.66,0:03:21.89,Default,,0000,0000,0000,,A block element does have a line after it,
Dialogue: 0,0:03:21.91,0:03:24.60,Default,,0000,0000,0000,,and that is what most HTML tags create.
Dialogue: 0,0:03:24.82,0:03:26.98,Default,,0000,0000,0000,,Look at all the examples on this page.
Dialogue: 0,0:03:27.04,0:03:30.28,Default,,0000,0000,0000,,The headings, the paragraphs, the list.
Dialogue: 0,0:03:30.80,0:03:33.70,Default,,0000,0000,0000,,The browser put new lines after all of them,
Dialogue: 0,0:03:33.73,0:03:36.15,Default,,0000,0000,0000,,without you needing to write a \N tag.
Dialogue: 0,0:03:37.03,0:03:39.04,Default,,0000,0000,0000,,What does that have to do with ,
Dialogue: 0,0:03:39.04,0:03:39.73,Default,,0000,0000,0000,,and ?
Dialogue: 0,0:03:39.84,0:03:43.20,Default,,0000,0000,0000,,Well a  creates an inline element,
Dialogue: 0,0:03:43.20,0:03:47.12,Default,,0000,0000,0000,,and a  creates a block element.
Dialogue: 0,0:03:47.25,0:03:49.49,Default,,0000,0000,0000,,That means, that if you add a ,
Dialogue: 0,0:03:49.49,0:03:53.43,Default,,0000,0000,0000,,and don't add any other style,
Dialogue: 0,0:03:53.94,0:03:56.27,Default,,0000,0000,0000,,the browser will blockify
Dialogue: 0,0:03:56.27,0:03:58.14,Default,,0000,0000,0000,,that part of the page.
Dialogue: 0,0:03:58.14,0:04:00.53,Default,,0000,0000,0000,,Like that bit of text just wrapped in a ,
Dialogue: 0,0:04:00.53,0:04:02.98,Default,,0000,0000,0000,,now has new lines before and after.
Dialogue: 0,0:04:02.100,0:04:05.50,Default,,0000,0000,0000,,And maybe that's what you want,
Dialogue: 0,0:04:05.50,0:04:07.52,Default,,0000,0000,0000,,just keep this difference in mind.
Dialogue: 0,0:04:07.55,0:04:09.38,Default,,0000,0000,0000,,And keep going, because there's a lot more
Dialogue: 0,0:04:09.40,0:04:10.88,Default,,0000,0000,0000,,we can do with these tags.
Dialogue: 0,0:04:10.88,0:04:12.63,Default,,0000,0000,0000,,Especially the might .
Dialogue: 0,0:04:12.63,0:04:14.00,Default,,0000,0000,0000,,Captioned by: 5A Jasmine :) aka JP 4B :)