Select and Style Multiple Elements by Class

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