All language subtitles for 9. Classes vs. Ids

Now in the last lesson we looked at how we can use class selectors instead of tag selectors and this
1

gave us way more flexibility and allowed us to specify the styles that we wanted for individual image
2

tags or individual html elements.
3

Now if you're looking at CSS selectors you might also come across the id selector and the id selector
4

is a little bit different from the class selector although they do have some similarities.
5

So let's try an example inside this h1.
6

I'm going to add an id attribute.
7

And this is going to have an id called heading.
8

Now in order to change the style of my heading and target the heading id I have to specify my selector
9

slightly differently.
10

So let's create a new section down here called id selectors and I'll show you how you can select it.
11

So remember our id is called heading.
12

And in order to target it I need to use the hash symbol or some might call it the pound sign and then I'm
13

going to add the name of that id which was called heading and the rest of it is exactly the same.
14

So let's make the color of the heading blue,
15

shall we?
16

Let's hit save and refresh and you can see that even though we've got the h1 still specified as having
17

a red text color, because our id and our class selectors are more specific,
18

this style will override this one.
19

And if you have a look inside the Chrome Developer Tools, selecting the h1 you can see that we've got
20

the h1 color being red but it's crossed out because the id heading is more specific and therefore
21

this is the one that we see on our web site.
22

Now this is the same.
23

Now this is the same for our class selectors.
24

For example let's get rid of these comments
25

to put this back online and we can see that we're saying that all images should have a background color
26

of red but the bacon class should have a background color of green.
27

And if I hit save and I refresh absolutely nothing changes.
28

And that's because if we have a look inside the Chrome Developer Tools and we select our bacon image
29

then you can see that the image tag selector is specifying that the background color should be red.
30

But our bacon class overrides that because it's more specific.
31

And this is saying that it should be green and that is what we see on screen.
32

So that is one similarity between classes and ids.
33

Now people get very very confused about when should you use ids,
34

when should you use classes because they seem like they're kind of similar.
35

Right.
36

Well one of the big differences between the two is that you can only have a single instance of one particular
37

id name inside a single page.
38

So I can't for example go into the paragraph tag and say that this one's id is also called heading and
39

you'll see that Atom gives me this error saying that heading must be unique.
40

I can only use this id in one place.
41

But whereas with class it doesn't really matter.
42

I can say that this class is bacon.
43

I can say this class is bacon, everybody's class is
44

bacon. It doesn't matter at all.
45

So you would use the id to identify elements where there is only a single one of them on a particular
46

page.
47

For example there's probably just going to be one heading or if you had a navigation bar you're probably
48

only going to have one navigation bar on your website but for the class you can use it to group related
49

elements that are all going to behave or have a similar style.
50

For instance if you had a blog and you want to style all the comments on the blog pages then they're
51

probably going to look exactly the same as each other.
52

So they might all have the same class value.
53

So use classes when you want to apply the same style to a group of related items and use the id to apply
54

a specific style to a single element on your web page.
55

And some say the analogy is kind of like name versus passport where anybody can have the same name.
56

Right.
57

Many many Angelas I'm sure across the world but there's only one person with my particular passport
58

number and that uniquely identifies me across all of the other humans in the world.
59

So the similarities are they’re both used to identify HTML elements that you want to style and CSS
60

doesn't actually care what you use.
61

If I said id equals heading here or class equals heading and apply the style,
62

it doesn't actually matter.
63

CSS doesn't care.
64

The other similarity between ids and classes as we mentioned before is that they are more specific than
65

the tag selectors and any of these styles will override any tag selector styles that are applied
66

to the same element.
67

The other thing that you'll notice is that some of these tags have predefined CSS styles that are applied
68

by the browsers.
69

For example the h1, if we have a look inside our Chrome Developer Tools and I select the h1 then you can
70

see that these user agent stylesheets,
71

this comes from the browser and this is applied no matter what CSS style you put down.
72

But if you do specify something using a tag selector inside your css file, for example here for the h1
73

I said that the font size should be 200 pixels and that overrides the default size for the browser and
74

it can be further overridden using ids or classes.
75

Now the differences between ids and classes is what trips up most people.
76

And the first thing to remember is that a particular id can only be used once on this page.
77

So I can only have this heading id once on this page but I can have more than one id so I can say maybe
78

this one’s id is called first-paragraph, but I cannot use this again anywhere else inside the same page.
79

The other difference is that any HTML element can have more than one class but it can only have
80

one id.
81

So what does this mean.
82

Well lets say that I wanted my broccoli image to be circular then we can change the border radius as
83

we did previously.
84

And I can do that by adding another class to my broccoli image called circular and if I go into my style
85

sheet and I target this circular class then I can specify that its border radius should be 100 percent
86

which is going to be circular.
87

So now that circular border radius is going to be applied to this image alongside the styles for the
88

broccoli class.
89

So if we hit save and refresh you'll see that my broccoli image is now circular but my bacon image
90

is left completely alone.
91

And I've implemented this by adding two classes to the same HTML element.
92

Now you can’t do the same thing with id.
93

So let's add another id for example called big.
94

And we tried putting it down here.
95

And let's use it to change the font size to something ridiculous like 1000 pixels. Let's hit save and
96

refresh.
97

You can see that all the styles for that heading id are now removed because this is not a valid id.
98

You can’t have more than one id for a particular element.
99

So that is another difference between classes and ids.
100

Now in practice and when you look at CSS code in the wild you'll see people use classes absolutely everywhere.
101

You'll see tag selectors being used broadly to affect the appearance of HTML elements but you'll see
102

ids used more sparingly and in fact the Linter for CSS on Atom actually suggests against using ids
103

as a selector to change the style.
104

Now I don't really agree with that because I think there are cases where it can be useful but you do
105

have to think very carefully when you do decide to use it.
106

Now the last thing that I want to show you now the last thing I want to show you with regards to CSS
107

selectors is something called a pseudo class.
108

And if we have a look inside the CSS reference amongst all of the different properties and their key
109

words you can see that some of these have a little colon in front of them and these are pseudo classes
110

and this is because HTML elements can have different states.
111

So for example when I hover over a piece of text or an image that's actually a different state and
112

I can get the CSS to change based on the state i.e. hovering over or not hovering over by using these pseudo
113

classes that have a colon in front and the one that you'll see the most often is the hover pseudo class
114

and this is what it looks like.
115

So you can select the hovered state of any HTML element in order to effect its style.
116

So let's go ahead and do that for our image tag.
117

Let's say that when our HTML image elements are hovered or hovered over, or you might know it as
118

rollover or mouseover, but when our images are in this particular state let's say that the background
119

color should be a maybe a gold color.
120

Let's hit save and let's refresh our site and let's check it out.
121

So if I go ahead and hover over my images you can see that it changes the background color to this gold
122

color simply by using that pseudo class of hover.
123

So take a look at some of these properties and different ways of using selectors and use it to mess
124

around with your web site to personalize it even more.