1
00:00:00,547 --> 00:00:03,873
Similar to ID selectors,
class selectors let us

2
00:00:03,873 --> 00:00:09,380
target elements based on their 
class attribute. The main difference

3
00:00:09,380 --> 00:00:13,992
between a class and an ID selector 
is that IDs are unique and

4
00:00:13,992 --> 00:00:18,780
they're used to identify just
one element on the page.

5
00:00:18,780 --> 00:00:23,390
Whereas a class can be used 
to classify and target more 

6
00:00:23,390 --> 00:00:27,850
than one element. This makes 
classes more flexible than IDs.

7
00:00:27,850 --> 00:00:28,970
Let's see how they work.

8
00:00:30,700 --> 00:00:35,270
Class selectors are defined with 
the dot character followed by the

9
00:00:35,270 --> 00:00:41,680
class name. Let's see what happens 
when we change this education ID 

10
00:00:41,680 --> 00:00:46,000
selector to a class selector. To do 
that, we'll replace the pound sign 

11
00:00:46,000 --> 00:00:52,630
with a dot. Now our selector is 
a class. If we go back and take

12
00:00:52,630 --> 00:00:57,999
a look in the browser, our red 
border is gone. That's because

13
00:00:57,999 --> 00:01:03,960
class selectors only target elements 
with matching class attributes.

14
00:01:03,960 --> 00:01:07,798
So we'll need to go back
into our HTML file and

15
00:01:07,798 --> 00:01:12,040
replace the ID attribute
with a class attribute.

16
00:01:13,750 --> 00:01:18,599
When we save our HTML file and
take a look in the browser,

17
00:01:18,599 --> 00:01:22,686
we can see how the class 
selector is targeting this 

18
00:01:22,686 --> 00:01:27,801
section element and once 
again applied the red border.

19
00:01:27,801 --> 00:01:33,747
Now, you might ask, since 
education works fine as a class

20
00:01:33,747 --> 00:01:36,901
or an ID, which one 
should we use?

21
00:01:36,901 --> 00:01:42,554
Since I'm 100% confident that
the education section is unique,

22
00:01:42,554 --> 00:01:47,070
I'm going to undo what I just 
did and make it an ID again.

23
00:01:48,880 --> 00:01:53,405
I like to use classes when I know
a selector won't be unique or

24
00:01:53,405 --> 00:01:57,245
when I'm not sure whether
it will be unique or not.

25
00:01:59,932 --> 00:02:05,020
Classes let us target more than one
element with the same class name.

26
00:02:05,020 --> 00:02:10,270
In fact, that's one of the biggest
advantages to using class selectors.

27
00:02:10,270 --> 00:02:13,163
Multiple elements can
share the same class, so

28
00:02:13,163 --> 00:02:16,740
we're able to reuse
them throughout a page.

29
00:02:16,740 --> 00:02:19,480
Remember, we're not allowed
to do that with IDs.

30
00:02:21,440 --> 00:02:25,512
In the last video, I suggested
that Developer Diane might like to

31
00:02:25,512 --> 00:02:29,670
highlight some of her front end
web development skills visually.

32
00:02:30,760 --> 00:02:35,353
Let's create a class in our CSS
that we can use multiple times.

33
00:02:50,431 --> 00:02:56,092
Then we can apply that class multiple 
times in our HTML to highlight

34
00:02:56,092 --> 00:03:02,779
Developer Diane's HTML, JavaScript, 
and mobile web development skills. 

35
00:03:15,954 --> 00:03:21,751
And there you go, multiple 
skills are highlighted. 

36
00:03:21,751 --> 00:03:24,709
Now, if you're not in love 
with this bold font and

37
00:03:24,709 --> 00:03:31,002
my choice of a teal background
with papayawhip text, no worries.

38
00:03:31,002 --> 00:03:35,112
As you get more comfortable
working with CSS selectors,

39
00:03:35,112 --> 00:03:38,207
you'll be able to create 
your own designs.

40
00:03:39,707 --> 00:03:43,305
Like with IDs, naming the 
class is up to you, as long

41
00:03:43,305 --> 00:03:48,541
as you start with a dot and
follow the same rules as before.

42
00:03:48,541 --> 00:03:53,383
Don't use spaces and avoid 
punctuation other than hyphens

43
00:03:53,383 --> 00:03:58,019
and underscores. And again, it's 
best to apply meaningful names

44
00:03:58,019 --> 00:04:04,076
that explain the purpose of the 
class, as I did with top-skill.

45
00:04:04,076 --> 00:04:08,358
Thinking back to working with IDs 
for a moment, hopefully you'll

46
00:04:08,358 --> 00:04:13,149
remember that not only must IDs
be unique within your HTML page,

47
00:04:13,149 --> 00:04:18,902
but that each element can have
only one ID applied to it.

48
00:04:18,902 --> 00:04:22,428
Classes are different. You can
apply as many classes as

49
00:04:22,428 --> 00:04:27,959
you want to a single HTML 
element. Let's say Developer

50
00:04:27,959 --> 00:04:31,916
Diane wanted to make the dates 
stand out on her resume.

51
00:04:31,916 --> 00:04:34,286
We'll create a 
class called date.

52
00:04:49,737 --> 00:04:53,826
And I'll apply that class to each 
p element in my HTML

52b
00:04:53,826 --> 00:04:55,826
containing a date.

53
00:05:16,124 --> 00:05:20,943
And look at that, each of 
these three dates has a steel

54
00:05:20,943 --> 00:05:25,167
blue border with rounded 
corners. Now, let's say some

55
00:05:24,167 --> 00:05:29,027
of this information is special 
and Diane really wants to 

56
00:05:29,027 --> 00:05:33,000
highlight her grad date from 
Treehouse and the dates 

57
00:05:33,000 --> 00:05:37,500
of her current job. We'll 
create a class called special.

58
00:05:53,461 --> 00:05:59,140
And then add that class to
the appropriate places in my HTML.

59
00:06:09,781 --> 00:06:13,122
To add multiple classes
to the same attribute,

60
00:06:13,122 --> 00:06:16,055
just separate the class 
names by a space.

61
00:06:19,664 --> 00:06:23,414
And great, it looks like those 
two dates are in uppercase 

62
00:06:23,414 --> 00:06:26,044
letters and have a 
papayawhip background.

63
00:06:29,461 --> 00:06:33,275
You can add as many classes 
as you want to a single

64
00:06:33,275 --> 00:06:37,431
element. Just keep 
separating them by spaces.

65
00:06:37,431 --> 00:06:42,082
So then you might ask,
is it possible to add a class and

66
00:06:42,082 --> 00:06:45,251
an ID to the same 
HTML element?

67
00:06:45,251 --> 00:06:46,823
It is.

68
00:06:46,823 --> 00:06:52,490
Let's say that Developer Diane is
really proud of her JavaScript skills.

69
00:06:52,490 --> 00:06:58,621
She might want to create an ID
called proud to show that one off.

70
00:07:10,319 --> 00:07:16,529
I'll then add another attribute to the
list item where JavaScript is featured.

71
00:07:31,837 --> 00:07:35,412
Okay, that worked, but
I've created a bit of a

72
00:07:35,412 --> 00:07:41,199
conflict here. Let's notice 
how my top-skill class

73
00:07:44,532 --> 00:07:48,279
says that my background 
should be teal, but the proud

74
00:07:48,279 --> 00:07:53,866
ID says that the background 
color should be firebrick.

75
00:07:53,866 --> 00:07:58,607
If we look in the browser,
the background is firebrick.

76
00:07:58,607 --> 00:08:03,337
How did the browser resolve
 this CSS conflict? We'll learn 

77
00:08:03,337 --> 00:08:08,630
more about how CSS conflicts 
get resolved in a future video.

78
00:08:08,630 --> 00:08:12,893
But for now, it's worth knowing
that IDs carry more weight

79
00:08:12,893 --> 00:08:17,336
than classes because they refer
to something very specific.

80
00:08:17,336 --> 00:08:21,250
So if an element has an ID 
and a class applied,

81
00:08:21,250 --> 00:08:26,400
the styles defined in the ID
selector will always carry more

82
00:08:26,400 --> 00:08:31,149
weight than the styles defined
in the class selector.

83
00:08:31,149 --> 00:08:35,611
If we're not careful about
how we use classes and IDs,

84
00:08:35,611 --> 00:08:39,890
we can end up overriding
styles in class selectors.

85
00:08:39,890 --> 00:08:43,366
That's why we need to make 
sure we don't share the 

86
00:08:43,366 --> 00:08:46,552
same properties between 
classes and IDs. I'm going

87
00:08:46,552 --> 00:08:52,179
to remove the background color 
declaration from my proud ID,

88
00:08:52,179 --> 00:08:56,714
since it's not good practice
having the conflict there.