Styling by class is especially great because it's reuseable.

We can write a bunch of style instructions under one class, and

use that one class to style multiple elements.

I'll show you what I mean.

In the last video, we wrote some CSS for the class card-title.

Let's assign that same class to the goals h2.

And refresh.

And as you can see, now those same styles are applied to the goals age too

without having to write any additional CSS.

Pretty cool, right?

Let's go for a more subtle border radius really quick.

So we'll go to styles.css and change the border radius to ten pixels.

And that's better.

Keep in mind that now that we've written this class,

we can add it to anything, not just another H2.

And that element will take on these styles.

For example,

I can add the card class title to this paragraph right below the goals H2.

As you can see it's taking on the styles we wrote for the card title class.

Let's go ahead and remove this class.

And now we can make both of these H2s that have the card title class look even better

with padding and margin.

Padding and margin are ways we can control the space around an element.

Understanding the difference between margin and

padding can be tricky at first, but imagine it this way.

When we talk about padding, we're talking about the space between the element and

its border.

Remember when I said that HTML elements can be thought of as boxes nested inside

of other boxes?

Well, when you adjust padding, you increase or

decrease the amount of space inside an element's box.

When you adjust margin you increase or

decrease the space outside of an element's box.

For example, look at the word background.

Padding affects this space here, between the word and its border.

Let's see this in action.

Go to styles.css and add 15 pixels

worth of padding to the card-title class

Now there is 15 pixels worth of space on all sides between the element and

it's border.

Change it to 150 pixels so we can really see what's going on here.

As you can see, the higher the padding,

the father away the element inside the box is from its border.

Let's get rid of this padding property and refresh.

So we can see what happens when we apply some margin.

Margin will control the space outside of the border.

Give this element a margin top of 50 pixels.

Did you see how it

jumped down?

There's now 50 pixels worth of space between top of the H2 element and

the box that it's nested within.

Let's look at another quick example of how padding can be useful.

This unordered list of skills in the goals section of the webpage

has padding applied to it.

Find this in index.html.

It's this element here.

And we can see that it has a class of skills on it.

So that's what we'll look for in styles.css.

Scroll up, and here it is.

Let's delete the padding and take a look.

Without padding, the background color only takes up the area directly around

the text, and it doesn't look very good, does it?

Let's go back and control or Command Z

to undo this, and we'll look again, and now we can see really clearly

how padding is being applied to these list items to improve how they look.

Feel free to play around with the padding values and see what happens.

Using classes to style your elements will help keep your code clean and organized,

and will save you from having to type the same style instructions over and over.

In the next and final part of this course,

I'll teach you how to make a brand new webpage and link to a new CSS style sheet.

When we're done, you'll be ready to start building websites on your own.

So let's get started.