All language subtitles for 038 Classes vs. Ids.en_US

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

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

tags or individual html elements.

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

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

So let's try an example inside this h1.

I'm going to add an id attribute.

And this is going to have an id called heading.

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

slightly differently.

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

So remember our id is called heading.

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

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

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

shall we?

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

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

this style will override this one.

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

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

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

Now this is the same.

Now this is the same for our class selectors.

For example let's get rid of these comments

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

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

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

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

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

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

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

So that is one similarity between classes and ids.

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

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

Right.

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

id name inside a single page.

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

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

I can only use this id in one place.

But whereas with class it doesn't really matter.

I can say that this class is bacon.

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

bacon. It doesn't matter at all.

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

page.

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

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

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

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

probably going to look exactly the same as each other.

So they might all have the same class value.

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

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

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

Right.

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

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

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

doesn't actually care what you use.

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

it doesn't actually matter.

CSS doesn't care.

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

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

to the same element.

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

by the browsers.

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

see that these user agent stylesheets,

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

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

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

it can be further overridden using ids or classes.

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

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

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

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

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

one id.

So what does this mean.

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

we did previously.

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

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

which is going to be circular.

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

broccoli class.

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

is left completely alone.

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

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

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

And we tried putting it down here.

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

refresh.

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

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

So that is another difference between classes and ids.

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

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

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

as a selector to change the style.

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

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

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

selectors is something called a pseudo class.

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

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

and this is because HTML elements can have different states.

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

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

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

and this is what it looks like.

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

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

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

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

color should be a maybe a gold color.

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

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

color simply by using that pseudo class of hover.

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

around with your web site to personalize it even more.