CSS grouping elements

{'type': u'plain'}

Captioned by: 5A Jasmine :) aka JP 4B :)

So far we've seen how you can

use CSS to style your text,

but we can also use CSS to completely

change the layout of our page.

That means we can move things around,

change the size,

even put things on top of each other.

But what are the things

we want to move around?

Sometimes they're elements

that we've already made,

like a certain paragraph,

or a certain heading.

But often times,

they're a group of elements that we've made,

like a selection of text,

or a heading and a few paragraphs.

In order to move them

around together as a unit,

we need to introduce two new HTML tags.

Which we call the grouping elements.

We didn't talk about them before CSS,

because they're only useful

when combined with CSS.

They have no semantic meaning to the browser.

The first tag, is the tag,

and it's what we use for grouping

a selection of text.

Let's say we want a colour,

that's word "Love Red".

And we just want to colour the word,

not the rest of the heading.

We'll put our cursor before "Love",

type the start tag for .

Put it after, type the end tag, okay.

Now we want to style this

of characters.

We could make a rule to colour all s

on the page,

but we may not want them all to be red.

Let's give the a

class of "lovey-dovey",

and add a rule just for elements that

have the class "lovey-dovey".

So, .lovey-dovey, color: red.

Look at how lovey dovey that text is now!

So s are good for grouping

selections of text, how do we group a

bunch of elements together?

That's where the tag comes in.

Let's say we want to group

this bottom section.

The official info header, and

the paragraphs and picture below it.

To do that,

I'll put my cursor before the h3 and do

the start tag for .

And then go down to the final paragraph,

and right the end tag for .

We have a , now we need to style it.

To style the ,

I'm going to give it an ID.

"official-info".

Then add a rule for it up here.

So #official-info, and background.

Let's make it a nice grey.

Let's pick out... this... That's good.

So now you can see the has become

a grey box containing all of the elements

inside of it.

And it's different from if we give each of

them a grey background separately.

If we did that, there would be a space in

between them that wouldn't go gray.

We have to make a ,

if we want a box around everything.

You can think of ,

as being for grouping text.

And you can think of ,

for grouping elements.

But there's another way to distinguish them as well.

You see there are two types

of elements in the CSS world.

Inline and block.

An inline element does not have a new line after it.

Like if you make a multiple of them they will all be on the same line.

A few examples we have talked about are

a and image.

And you can see with this image,

how it just runs into the text next to it.

There's no new line after it.

A block element does have a line after it,

and that is what most HTML tags create.

Look at all the examples on this page.

The headings, the paragraphs, the list.

The browser put new lines after all of them,

without you needing to write a
tag.

What does that have to do with ,

and ?

Well a creates an inline element,

and a creates a block element.

That means, that if you add a ,

and don't add any other style,

the browser will blockify

that part of the page.

Like that bit of text just wrapped in a ,

now has new lines before and after.

And maybe that's what you want,

just keep this difference in mind.

And keep going, because there's a lot more

we can do with these tags.

Especially the might .

Captioned by: 5A Jasmine :) aka JP 4B :)