Class Selectors

Similar to ID selectors, 0:00 class selectors let us target elements based on their class attribute. 0:02 Now, the main difference between a class and 0:06 an ID selector is that ID's are unique. 0:08 And they're used to identify one element on the page. 0:12 Whereas a class can be used to classify and target more than one element. 0:15 This makes classes more flexible than ID's. 0:19 Let's see how. 0:22 Class selectors are define with the dot character follow by the class name. 0:24 So in our style.css file. 0:29 Let's see what happen when we change this primary content ID selector. 0:32 To a class selector. 0:38 To do that we'll replace the pound sign with a dot. 0:39 So now our selector is a class. 0:44 And if we save our style sheet and take a look at it in the browser preview 0:47 when we refresh we can see that the red border is now gone. 0:53 Well, that's because class selectors only target elements with 0:58 matching class attributes. 1:01 So we'll need to go back to our HTML file. 1:03 So for the div element on line 12, I'm going to replace ID, with class. 1:07 And now when we save our html file and take a look at it in the browser, 1:14 we could see how the class selector is now targeting that primary content element. 1:19 And once again we see that fancy red border applied to the div. 1:23 Classes let us target more than one element with the same class name. 1:29 In fact, that's one of the biggest advantages to using class selectors. 1:33 Multiple elements can share the same class, so 1:37 we're able to reuse them throughout a page. 1:41 Remember, we're not allowed to do that with ID's. 1:43 So if we give another element in our HTML file the class primary content, 1:46 we should also see the red border applied to that element. 1:52 So for instance I'm going to copy this entire class attribute and 1:55 we're going to scroll down to the div on line 24. 1:59 And in the opening div tag, paste in that class attribute and when we 2:03 save our index.html file and refresh the page, that's exactly what we're seeing. 2:08 Both divs now have that red border applied. 2:14 Like with ID's, naming the class is up to us and 2:18 we should also give them meaningful names that explain their purpose. 2:23 So let's go back to our HTML file and add a few more class attributes. 2:27 But first, instead of giving this second div on line 24 the class primary content, 2:33 let's rename it to secondary content because that's what it actually contains. 2:40 Next, let's scroll up and give our header element the class main header. 2:46 So right in our opening header tag, right after the ID attribute, 2:52 we're going to add a class attribute and give it the class name main header. 2:58 Now we could probably just continue using the header type selector 3:06 we wrote earlier to target the header element but let's instead give it that 3:11 class name main-header because again we'll want to give it a meaningful class name. 3:17 And since we know that this will always be the main header on our page or website. 3:22 This main header class communicates that very clearly. 3:27 So let's save our index.html file. 3:32 And go back to our style sheet, and target these new classes. 3:35 So first, we're going to change the header type selector, 3:40 to match that main header class. 3:45 So I'm going to replace the word header with the main dash header class name. 3:46 So if we save our style sheet and take a look at it once again 3:55 in the browser preview, we can see that nothing really changes. 3:58 The header styles are still the same. 4:02 We're just targeting with a class selector now. 4:05 So next, let's scroll down. 4:09 And go back to our primary content selector. 4:11 And let's remove that that red border style we wrote earlier, 4:14 as it's not part of our actual site design. 4:19 So instead, let's center align all the text in that div. 4:21 To do that, we can write text-align. 4:25 And set the value to center. 4:30 So now when we save our CSS file and take a look at it in the browser we can 4:33 see how that center aligns our text inside that primary content div. 4:38 So back in our style sheet. 4:45 Let's also target that secondary content class we wrote earlier. 4:47 So right below the primary content rule we're going to 4:52 write dot followed by secondary-content. 4:55 Then we're going to add a border top style declaration. 5:01 So we'll say border-top. 5:06 Followed by colon space and two pixels and we'll add a space and 5:08 then we'll type the word solid followed by space and 5:13 we're going to write light grey followed by a semi-colon. 5:17 Now even though we don't need to know exactly what this declaration does 5:23 just yet. 5:27 You can probably tell what's about to happen here. 5:29 Many CSS declarations like this are pretty understandable at first glance. 5:31 So if you think this class selector is going to give the secondary content 5:36 div a solid light gray top border, then you're on the right track. 5:43 So let's take a look. 5:49 We'll save our style.css file. 5:50 And when we refresh the browser and scroll down, that's exactly what happens. 5:53 There's that light gray solid border applied to our secondary content element. 5:58