This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Class selectors let us target elements based on their class attribute. The main difference between a class and an ID selector is that IDs are unique and they’re used to identify one element on the page, whereas a class can target more than one element.
Using class selectors
Class selectors are defined with the . character followed by the class name.
.primary-content {
background: grey;
}
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
You need to sign up for Treehouse in order to download course files.
Sign up