WEBVTT

00:00:00.360 --> 00:00:02.029
So far we've seen how you can

00:00:02.029 --> 00:00:03.588
use CSS to style your text,

00:00:04.088 --> 00:00:05.904
but we can also use CSS to completely

00:00:05.904 --> 00:00:07.500
change the layout of our page.

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

00:00:09.157 --> 00:00:10.187
change the size,

00:00:10.187 --> 00:00:11.777
even put things on top of each other.

00:00:12.010 --> 00:00:13.551
But what are the things

00:00:13.551 --> 00:00:14.401
we want to move around?

00:00:14.498 --> 00:00:16.118
Sometimes they're elements

00:00:16.118 --> 00:00:17.339
that we've already made,

00:00:17.339 --> 00:00:18.812
like a certain paragraph,

00:00:18.812 --> 00:00:20.672
or a certain heading.

00:00:21.231 --> 00:00:22.365
But often times,

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

00:00:24.679 --> 00:00:26.889
like a selection of text,

00:00:27.055 --> 00:00:30.065
or a heading and a few paragraphs.

00:00:31.693 --> 00:00:32.946
In order to move them

00:00:32.946 --> 00:00:34.365
around together as a unit,

00:00:34.365 --> 00:00:36.785
we need to introduce two new HTML tags.

00:00:36.805 --> 00:00:39.225
Which we call the grouping elements.

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

00:00:41.460 --> 00:00:42.662
because they're only useful

00:00:42.662 --> 00:00:44.210
when combined with CSS.

00:00:44.210 --> 00:00:46.555
They have no semantic meaning to the browser.

00:00:47.275 --> 00:00:49.176
The first tag, is the  tag,

00:00:49.596 --> 00:00:51.516
and it's what we use for grouping

00:00:51.516 --> 00:00:52.756
a selection of text.

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

00:00:54.193 --> 00:00:56.503
that's word "Love Red".

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

00:00:58.692 --> 00:00:59.952
not the rest of the heading.

00:01:00.327 --> 00:01:02.458
We'll put our cursor before "Love",

00:01:02.458 --> 00:01:06.138
type the start tag for .

00:01:06.499 --> 00:01:10.519
Put it after, type the end tag, okay.

00:01:10.678 --> 00:01:11.644
Now we want to style this

00:01:11.644 --> 00:01:12.809
 of characters.

00:01:13.008 --> 00:01:14.643
We could make a rule to colour all s

00:01:14.723 --> 00:01:15.680
on the page,

00:01:15.780 --> 00:01:18.558
but we may not want them all to be red.

00:01:18.558 --> 00:01:19.980
Let's give the  a

00:01:20.107 --> 00:01:21.980
class of "lovey-dovey",

00:01:25.086 --> 00:01:29.053
and add a rule just for elements that

00:01:29.053 --> 00:01:30.370
have the class "lovey-dovey".

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

00:01:34.613 --> 00:01:36.703
Look at how lovey dovey that text is now!

00:01:38.093 --> 00:01:39.667
So s are good for grouping

00:01:39.667 --> 00:01:41.717
selections of text, how do we group a

00:01:41.727 --> 00:01:43.187
bunch of elements together?

00:01:43.507 --> 00:01:45.247
That's where the  tag comes in.

00:01:45.680 --> 00:01:46.747
Let's say we want to group

00:01:46.747 --> 00:01:47.717
this bottom section.

00:01:48.195 --> 00:01:49.464
The official info header, and

00:01:49.464 --> 00:01:51.174
the paragraphs and picture below it.

00:01:51.743 --> 00:01:52.714
To do that,

00:01:52.714 --> 00:01:58.129
I'll put my cursor before the h3 and do

00:01:58.129 --> 00:01:59.389
the start tag for .

00:01:59.859 --> 00:02:02.259
And then go down to the final paragraph,

00:02:02.690 --> 00:02:04.620
and right the end tag for .

00:02:05.467 --> 00:02:07.847
We have a , now we need to style it.

00:02:08.510 --> 00:02:09.568
To style the ,

00:02:09.568 --> 00:02:11.426
I'm going to give it an ID.

00:02:11.426 --> 00:02:13.516
"official-info".

00:02:15.117 --> 00:02:16.417
Then add a rule for it up here.

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

00:02:22.275 --> 00:02:23.715
Let's make it a nice grey.

00:02:23.884 --> 00:02:26.934
Let's pick out... this... That's good.

00:02:27.133 --> 00:02:28.646
So now you can see the  has become

00:02:28.646 --> 00:02:30.841
a grey box containing all of the elements

00:02:30.841 --> 00:02:31.681
inside of it.

00:02:31.772 --> 00:02:34.267
And it's different from if we give each of

00:02:34.267 --> 00:02:35.947
them a grey background separately.

00:02:35.998 --> 00:02:38.228
If we did that, there would be a space in

00:02:38.228 --> 00:02:39.308
between them that wouldn't go gray.

00:02:39.520 --> 00:02:41.120
We have to make a ,

00:02:41.129 --> 00:02:42.909
if we want a box around everything.

00:02:44.708 --> 00:02:46.185
You can think of ,

00:02:46.185 --> 00:02:47.735
as being for grouping text.

00:02:48.303 --> 00:02:50.759
And you can think of ,

00:02:50.759 --> 00:02:52.269
for grouping elements.

00:02:52.478 --> 00:02:54.718
But there's another way to distinguish them as well.

00:02:55.451 --> 00:02:56.854
You see there are two types

00:02:56.854 --> 00:02:58.104
of elements in the CSS world.

00:02:58.412 --> 00:03:00.232
Inline and block.

00:03:00.499 --> 00:03:03.409
An inline element does not have a new line after it.

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

00:03:06.726 --> 00:03:08.751
A few examples we have talked about are

00:03:08.751 --> 00:03:11.651
a and image.

00:03:11.832 --> 00:03:13.432
And you can see with this image,

00:03:13.451 --> 00:03:16.431
how it just runs into the text next to it.

00:03:16.616 --> 00:03:18.326
There's no new line after it.

00:03:18.657 --> 00:03:21.887
A block element does have a line after it,

00:03:21.912 --> 00:03:24.602
and that is what most HTML tags create.

00:03:24.818 --> 00:03:26.978
Look at all the examples on this page.

00:03:27.041 --> 00:03:30.281
The headings, the paragraphs, the list.

00:03:30.799 --> 00:03:33.699
The browser put new lines after all of them,

00:03:33.732 --> 00:03:36.152
without you needing to write a 
 tag.

00:03:37.027 --> 00:03:39.039
What does that have to do with ,

00:03:39.039 --> 00:03:39.727
and ?

00:03:39.835 --> 00:03:43.203
Well a  creates an inline element,

00:03:43.203 --> 00:03:47.123
and a  creates a block element.

00:03:47.252 --> 00:03:49.492
That means, that if you add a ,

00:03:49.492 --> 00:03:53.432
and don't add any other style,

00:03:53.940 --> 00:03:56.270
the browser will blockify

00:03:56.270 --> 00:03:58.145
that part of the page.

00:03:58.145 --> 00:04:00.534
Like that bit of text just wrapped in a ,

00:04:00.534 --> 00:04:02.984
now has new lines before and after.

00:04:02.998 --> 00:04:05.495
And maybe that's what you want,

00:04:05.495 --> 00:04:07.525
just keep this difference in mind.

00:04:07.553 --> 00:04:09.383
And keep going, because there's a lot more

00:04:09.395 --> 00:04:10.885
we can do with these tags.

00:04:10.885 --> 00:04:12.631
Especially the might .

00:04:12.631 --> 00:04:14.000
Captioned by: 5A Jasmine :) aka JP 4B :)