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.