1
00:00:00,390 --> 00:00:04,100
Styling by class is especially
great because it's reuseable.

2
00:00:04,100 --> 00:00:07,110
We can write a bunch of style
instructions under one class, and

3
00:00:07,110 --> 00:00:09,880
use that one class to
style multiple elements.

4
00:00:09,880 --> 00:00:11,510
I'll show you what I mean.

5
00:00:11,510 --> 00:00:16,490
In the last video, we wrote some CSS for
the class card-title.

6
00:00:16,490 --> 00:00:19,318
Let's assign that same
class to the goals h2.

7
00:00:19,318 --> 00:00:26,010
And refresh.

8
00:00:26,010 --> 00:00:29,830
And as you can see, now those same
styles are applied to the goals age too

9
00:00:29,830 --> 00:00:32,930
without having to write
any additional CSS.

10
00:00:32,930 --> 00:00:34,020
Pretty cool, right?

11
00:00:34,020 --> 00:00:36,850
Let's go for
a more subtle border radius really quick.

12
00:00:36,850 --> 00:00:41,340
So we'll go to styles.css and
change the border radius to ten pixels.

13
00:00:45,770 --> 00:00:46,770
And that's better.

14
00:00:47,890 --> 00:00:50,030
Keep in mind that now that
we've written this class,

15
00:00:50,030 --> 00:00:52,870
we can add it to anything,
not just another H2.

16
00:00:52,870 --> 00:00:56,210
And that element will
take on these styles.

17
00:00:56,210 --> 00:00:57,222
For example,

18
00:00:57,222 --> 00:01:02,462
I can add the card class title to this
paragraph right below the goals H2.

19
00:01:10,660 --> 00:01:15,580
As you can see it's taking on the styles
we wrote for the card title class.

20
00:01:15,580 --> 00:01:17,080
Let's go ahead and remove this class.

21
00:01:19,930 --> 00:01:24,970
And now we can make both of these H2s that
have the card title class look even better

22
00:01:24,970 --> 00:01:26,880
with padding and margin.

23
00:01:26,880 --> 00:01:31,000
Padding and margin are ways we can
control the space around an element.

24
00:01:31,000 --> 00:01:32,990
Understanding the difference
between margin and

25
00:01:32,990 --> 00:01:36,330
padding can be tricky at first,
but imagine it this way.

26
00:01:36,330 --> 00:01:40,110
When we talk about padding, we're talking
about the space between the element and

27
00:01:40,110 --> 00:01:41,390
its border.

28
00:01:41,390 --> 00:01:45,620
Remember when I said that HTML elements
can be thought of as boxes nested inside

29
00:01:45,620 --> 00:01:46,800
of other boxes?

30
00:01:46,800 --> 00:01:49,190
Well, when you adjust padding,
you increase or

31
00:01:49,190 --> 00:01:53,030
decrease the amount of space
inside an element's box.

32
00:01:53,030 --> 00:01:55,380
When you adjust margin you increase or

33
00:01:55,380 --> 00:01:58,030
decrease the space outside
of an element's box.

34
00:01:59,190 --> 00:02:01,680
For example, look at the word background.

35
00:02:01,680 --> 00:02:06,370
Padding affects this space here,
between the word and its border.

36
00:02:06,370 --> 00:02:07,408
Let's see this in action.

37
00:02:07,408 --> 00:02:12,755
Go to styles.css and add 15 pixels

38
00:02:12,755 --> 00:02:18,796
worth of padding to the card-title class

39
00:02:24,296 --> 00:02:28,450
Now there is 15 pixels worth of space
on all sides between the element and

40
00:02:28,450 --> 00:02:30,300
it's border.

41
00:02:30,300 --> 00:02:33,680
Change it to 150 pixels so
we can really see what's going on here.

42
00:02:36,280 --> 00:02:37,840
As you can see, the higher the padding,

43
00:02:37,840 --> 00:02:41,610
the father away the element inside
the box is from its border.

44
00:02:41,610 --> 00:02:46,660
Let's get rid of this padding property and
refresh.

45
00:02:46,660 --> 00:02:49,430
So we can see what happens
when we apply some margin.

46
00:02:49,430 --> 00:02:52,860
Margin will control the space
outside of the border.

47
00:02:52,860 --> 00:02:55,975
Give this element a margin
top of 50 pixels.

48
00:02:55,975 --> 00:03:01,215
Did you see how it

49
00:03:01,215 --> 00:03:05,710
jumped down?

50
00:03:06,740 --> 00:03:12,150
There's now 50 pixels worth of space
between top of the H2 element and

51
00:03:12,150 --> 00:03:13,745
the box that it's nested within.

52
00:03:14,950 --> 00:03:18,780
Let's look at another quick example
of how padding can be useful.

53
00:03:18,780 --> 00:03:22,290
This unordered list of skills in
the goals section of the webpage

54
00:03:22,290 --> 00:03:23,860
has padding applied to it.

55
00:03:23,860 --> 00:03:25,500
Find this in index.html.

56
00:03:25,500 --> 00:03:29,220
It's this element here.

57
00:03:29,220 --> 00:03:32,570
And we can see that it has
a class of skills on it.

58
00:03:32,570 --> 00:03:35,064
So that's what we'll look for
in styles.css.

59
00:03:36,290 --> 00:03:41,430
Scroll up, and here it is.

60
00:03:42,760 --> 00:03:45,250
Let's delete the padding and take a look.

61
00:03:47,770 --> 00:03:51,940
Without padding, the background color
only takes up the area directly around

62
00:03:51,940 --> 00:03:54,280
the text, and
it doesn't look very good, does it?

63
00:03:55,720 --> 00:04:00,720
Let's go back and control or Command Z

64
00:04:00,720 --> 00:04:05,770
to undo this, and we'll look again,
and now we can see really clearly

65
00:04:05,770 --> 00:04:09,500
how padding is being applied to these
list items to improve how they look.

66
00:04:09,500 --> 00:04:12,990
Feel free to play around with
the padding values and see what happens.

67
00:04:12,990 --> 00:04:16,840
Using classes to style your elements will
help keep your code clean and organized,

68
00:04:16,840 --> 00:04:21,530
and will save you from having to type
the same style instructions over and over.

69
00:04:21,530 --> 00:04:23,790
In the next and final part of this course,

70
00:04:23,790 --> 00:04:28,380
I'll teach you how to make a brand new
webpage and link to a new CSS style sheet.

71
00:04:28,380 --> 00:04:31,860
When we're done, you'll be ready to
start building websites on your own.

72
00:04:31,860 --> 00:04:32,650
So let's get started.