0:00:00.360,0:00:02.029
So far we've seen how you can

0:00:02.029,0:00:03.588
use CSS to style your text,

0:00:04.088,0:00:05.904
but we can also use CSS to completely

0:00:05.904,0:00:07.500
change the layout of our page.

0:00:07.620,0:00:09.148
That means we can move things around,

0:00:09.157,0:00:10.187
change the size,

0:00:10.187,0:00:11.777
even put things on top of each other.

0:00:12.010,0:00:13.551
But what are the things

0:00:13.551,0:00:14.401
we want to move around?

0:00:14.498,0:00:16.118
Sometimes they're elements

0:00:16.118,0:00:17.339
that we've already made,

0:00:17.339,0:00:18.812
like a certain paragraph,

0:00:18.812,0:00:20.672
or a certain heading.

0:00:21.231,0:00:22.365
But often times,

0:00:22.445,0:00:24.679
they're a group of elements that we've made,

0:00:24.679,0:00:26.889
like a selection of text,

0:00:27.055,0:00:30.065
or a heading and a few paragraphs.

0:00:31.693,0:00:32.946
In order to move them

0:00:32.946,0:00:34.365
around together as a unit,

0:00:34.365,0:00:36.785
we need to introduce two new HTML tags.

0:00:36.805,0:00:39.225
Which we call the grouping elements.

0:00:39.246,0:00:41.460
We didn't talk about them before CSS,

0:00:41.460,0:00:42.662
because they're only useful

0:00:42.662,0:00:44.210
when combined with CSS.

0:00:44.210,0:00:46.555
They have no semantic meaning to the browser.

0:00:47.275,0:00:49.176
The first tag, is the  tag,

0:00:49.596,0:00:51.516
and it's what we use for grouping

0:00:51.516,0:00:52.756
a selection of text.

0:00:53.244,0:00:54.193
Let's say we want a colour,

0:00:54.193,0:00:56.503
that's word "Love Red".

0:00:57.055,0:00:58.692
And we just want to colour the word,

0:00:58.692,0:00:59.952
not the rest of the heading.

0:01:00.327,0:01:02.458
We'll put our cursor before "Love",

0:01:02.458,0:01:06.138
type the start tag for .

0:01:06.499,0:01:10.519
Put it after, type the end tag, okay.

0:01:10.678,0:01:11.644
Now we want to style this

0:01:11.644,0:01:12.809
of characters.

0:01:13.008,0:01:14.643
We could make a rule to colour all s

0:01:14.723,0:01:15.680
on the page,

0:01:15.780,0:01:18.558
but we may not want them all to be red.

0:01:18.558,0:01:19.980
Let's give the  a

0:01:20.107,0:01:21.980
class of "lovey-dovey",

0:01:25.086,0:01:29.053
and add a rule just for elements that

0:01:29.053,0:01:30.370
have the class "lovey-dovey".

0:01:30.388,0:01:33.755
So, .lovey-dovey, color: red.

0:01:34.613,0:01:36.703
Look at how lovey dovey that text is now!

0:01:38.093,0:01:39.667
So s are good for grouping

0:01:39.667,0:01:41.717
selections of text, how do we group a

0:01:41.727,0:01:43.187
bunch of elements together?

0:01:43.507,0:01:45.247
That's where the  tag comes in.

0:01:45.680,0:01:46.747
Let's say we want to group

0:01:46.747,0:01:47.717
this bottom section.

0:01:48.195,0:01:49.464
The official info header, and

0:01:49.464,0:01:51.174
the paragraphs and picture below it.

0:01:51.743,0:01:52.714
To do that,

0:01:52.714,0:01:58.129
I'll put my cursor before the h3 and do

0:01:58.129,0:01:59.389
the start tag for .

0:01:59.859,0:02:02.259
And then go down to the final paragraph,

0:02:02.690,0:02:04.620
and right the end tag for .

0:02:05.467,0:02:07.847
We have a , now we need to style it.

0:02:08.510,0:02:09.568
To style the ,

0:02:09.568,0:02:11.426
I'm going to give it an ID.

0:02:11.426,0:02:13.516
"official-info".

0:02:15.117,0:02:16.417
Then add a rule for it up here.

0:02:16.422,0:02:21.102
So #official-info, and background.

0:02:22.275,0:02:23.715
Let's make it a nice grey.

0:02:23.884,0:02:26.934
Let's pick out... this... That's good.

0:02:27.133,0:02:28.646
So now you can see the  has become

0:02:28.646,0:02:30.841
a grey box containing all of the elements

0:02:30.841,0:02:31.681
inside of it.

0:02:31.772,0:02:34.267
And it's different from if we give each of

0:02:34.267,0:02:35.947
them a grey background separately.

0:02:35.998,0:02:38.228
If we did that, there would be a space in

0:02:38.228,0:02:39.308
between them that wouldn't go gray.

0:02:39.520,0:02:41.120
We have to make a ,

0:02:41.129,0:02:42.909
if we want a box around everything.

0:02:44.708,0:02:46.185
You can think of ,

0:02:46.185,0:02:47.735
as being for grouping text.

0:02:48.303,0:02:50.759
And you can think of ,

0:02:50.759,0:02:52.269
for grouping elements.

0:02:52.478,0:02:54.718
But there's another way to distinguish them as well.

0:02:55.451,0:02:56.854
You see there are two types

0:02:56.854,0:02:58.104
of elements in the CSS world.

0:02:58.412,0:03:00.232
Inline and block.

0:03:00.499,0:03:03.409
An inline element does not have a new line after it.

0:03:03.570,0:03:06.726
Like if you make a multiple of them they will all be on the same line.

0:03:06.726,0:03:08.751
A few examples we have talked about are

0:03:08.751,0:03:11.651
a and image.

0:03:11.832,0:03:13.432
And you can see with this image,

0:03:13.451,0:03:16.431
how it just runs into the text next to it.

0:03:16.616,0:03:18.326
There's no new line after it.

0:03:18.657,0:03:21.887
A block element does have a line after it,

0:03:21.912,0:03:24.602
and that is what most HTML tags create.

0:03:24.818,0:03:26.978
Look at all the examples on this page.

0:03:27.041,0:03:30.281
The headings, the paragraphs, the list.

0:03:30.799,0:03:33.699
The browser put new lines after all of them,

0:03:33.732,0:03:36.152
without you needing to write a [br] tag.

0:03:37.027,0:03:39.039
What does that have to do with ,

0:03:39.039,0:03:39.727
and ?

0:03:39.835,0:03:43.203
Well a  creates an inline element,

0:03:43.203,0:03:47.123
and a  creates a block element.

0:03:47.252,0:03:49.492
That means, that if you add a ,

0:03:49.492,0:03:53.432
and don't add any other style,

0:03:53.940,0:03:56.270
the browser will blockify

0:03:56.270,0:03:58.145
that part of the page.

0:03:58.145,0:04:00.534
Like that bit of text just wrapped in a ,

0:04:00.534,0:04:02.984
now has new lines before and after.

0:04:02.998,0:04:05.495
And maybe that's what you want,

0:04:05.495,0:04:07.525
just keep this difference in mind.

0:04:07.553,0:04:09.383
And keep going, because there's a lot more

0:04:09.395,0:04:10.885
we can do with these tags.

0:04:10.885,0:04:12.631
Especially the might .

0:04:12.631,0:04:14.000
Captioned by: 5A Jasmine :) aka JP 4B :)