Similar to ID selectors,

class selectors let us target elements based on their class attribute.

Now, the main difference between a class and

an ID selector is that ID's are unique.

And they're used to identify one element on the page.

Whereas a class can be used to classify and target more than one element.

This makes classes more flexible than ID's.

Let's see how.

Class selectors are define with the dot character follow by the class name.

So in our style.css file.

Let's see what happen when we change this primary content ID selector.

To a class selector.

To do that we'll replace the pound sign with a dot.

So now our selector is a class.

And if we save our style sheet and take a look at it in the browser preview

when we refresh we can see that the red border is now gone.

Well, that's because class selectors only target elements with

matching class attributes.

So we'll need to go back to our HTML file.

So for the div element on line 12, I'm going to replace ID, with class.

And now when we save our html file and take a look at it in the browser,

we could see how the class selector is now targeting that primary content element.

And once again we see that fancy red border applied to the div.

Classes let us target more than one element with the same class name.

In fact, that's one of the biggest advantages to using class selectors.

Multiple elements can share the same class, so

we're able to reuse them throughout a page.

Remember, we're not allowed to do that with ID's.

So if we give another element in our HTML file the class primary content,

we should also see the red border applied to that element.

So for instance I'm going to copy this entire class attribute and

we're going to scroll down to the div on line 24.

And in the opening div tag, paste in that class attribute and when we

save our index.html file and refresh the page, that's exactly what we're seeing.

Both divs now have that red border applied.

Like with ID's, naming the class is up to us and

we should also give them meaningful names that explain their purpose.

So let's go back to our HTML file and add a few more class attributes.

But first, instead of giving this second div on line 24 the class primary content,

let's rename it to secondary content because that's what it actually contains.

Next, let's scroll up and give our header element the class main header.

So right in our opening header tag, right after the ID attribute,

we're going to add a class attribute and give it the class name main header.

Now we could probably just continue using the header type selector

we wrote earlier to target the header element but let's instead give it that

class name main-header because again we'll want to give it a meaningful class name.

And since we know that this will always be the main header on our page or website.

This main header class communicates that very clearly.

So let's save our index.html file.

And go back to our style sheet, and target these new classes.

So first, we're going to change the header type selector,

to match that main header class.

So I'm going to replace the word header with the main dash header class name.

So if we save our style sheet and take a look at it once again

in the browser preview, we can see that nothing really changes.

The header styles are still the same.

We're just targeting with a class selector now.

So next, let's scroll down.

And go back to our primary content selector.

And let's remove that that red border style we wrote earlier,

as it's not part of our actual site design.

So instead, let's center align all the text in that div.

To do that, we can write text-align.

And set the value to center.

So now when we save our CSS file and take a look at it in the browser we can

see how that center aligns our text inside that primary content div.

So back in our style sheet.

Let's also target that secondary content class we wrote earlier.

So right below the primary content rule we're going to

write dot followed by secondary-content.

Then we're going to add a border top style declaration.

So we'll say border-top.

Followed by colon space and two pixels and we'll add a space and

then we'll type the word solid followed by space and

we're going to write light grey followed by a semi-colon.

Now even though we don't need to know exactly what this declaration does

just yet.

You can probably tell what's about to happen here.

Many CSS declarations like this are pretty understandable at first glance.

So if you think this class selector is going to give the secondary content

div a solid light gray top border, then you're on the right track.

So let's take a look.

We'll save our style.css file.

And when we refresh the browser and scroll down, that's exactly what happens.

There's that light gray solid border applied to our secondary content element.