Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You will learn about the CSS attributes, padding and margin.
Styling by class is especially
great because it's reuseable.
0:00
We can write a bunch of style
instructions under one class, and
0:04
use that one class to
style multiple elements.
0:07
I'll show you what I mean.
0:09
In the last video, we wrote some CSS for
the class card-title.
0:11
Let's assign that same
class to the goals h2.
0:16
And refresh.
0:19
And as you can see, now those same
styles are applied to the goals age too
0:26
without having to write
any additional CSS.
0:29
Pretty cool, right?
0:32
Let's go for
a more subtle border radius really quick.
0:34
So we'll go to styles.css and
change the border radius to ten pixels.
0:36
And that's better.
0:45
Keep in mind that now that
we've written this class,
0:47
we can add it to anything,
not just another H2.
0:50
And that element will
take on these styles.
0:52
For example,
0:56
I can add the card class title to this
paragraph right below the goals H2.
0:57
As you can see it's taking on the styles
we wrote for the card title class.
1:10
Let's go ahead and remove this class.
1:15
And now we can make both of these H2s that
have the card title class look even better
1:19
with padding and margin.
1:24
Padding and margin are ways we can
control the space around an element.
1:26
Understanding the difference
between margin and
1:31
padding can be tricky at first,
but imagine it this way.
1:32
When we talk about padding, we're talking
about the space between the element and
1:36
its border.
1:40
Remember when I said that HTML elements
can be thought of as boxes nested inside
1:41
of other boxes?
1:45
Well, when you adjust padding,
you increase or
1:46
decrease the amount of space
inside an element's box.
1:49
When you adjust margin you increase or
1:53
decrease the space outside
of an element's box.
1:55
For example, look at the word background.
1:59
Padding affects this space here,
between the word and its border.
2:01
Let's see this in action.
2:06
Go to styles.css and add 15 pixels
2:07
worth of padding to the card-title class
2:12
Now there is 15 pixels worth of space
on all sides between the element and
2:24
it's border.
2:28
Change it to 150 pixels so
we can really see what's going on here.
2:30
As you can see, the higher the padding,
2:36
the father away the element inside
the box is from its border.
2:37
Let's get rid of this padding property and
refresh.
2:41
So we can see what happens
when we apply some margin.
2:46
Margin will control the space
outside of the border.
2:49
Give this element a margin
top of 50 pixels.
2:52
Did you see how it
2:55
jumped down?
3:01
There's now 50 pixels worth of space
between top of the H2 element and
3:06
the box that it's nested within.
3:12
Let's look at another quick example
of how padding can be useful.
3:14
This unordered list of skills in
the goals section of the webpage
3:18
has padding applied to it.
3:22
Find this in index.html.
3:23
It's this element here.
3:25
And we can see that it has
a class of skills on it.
3:29
So that's what we'll look for
in styles.css.
3:32
Scroll up, and here it is.
3:36
Let's delete the padding and take a look.
3:42
Without padding, the background color
only takes up the area directly around
3:47
the text, and
it doesn't look very good, does it?
3:51
Let's go back and control or Command Z
3:55
to undo this, and we'll look again,
and now we can see really clearly
4:00
how padding is being applied to these
list items to improve how they look.
4:05
Feel free to play around with
the padding values and see what happens.
4:09
Using classes to style your elements will
help keep your code clean and organized,
4:12
and will save you from having to type
the same style instructions over and over.
4:16
In the next and final part of this course,
4:21
I'll teach you how to make a brand new
webpage and link to a new CSS style sheet.
4:23
When we're done, you'll be ready to
start building websites on your own.
4:28
So let's get started.
4:31
You need to sign up for Treehouse in order to download course files.
Sign up