All language subtitles for 026 Class and ID Selectors.en_US

At the end of the previous lecture,

we discussed how it would be nice

to be able to name some elements

and then use those names to select them in CSS.

And so in this video,

we will learn to do exactly that using Classes and IDs.

So remember how in the last lecture

we wanted to style only this text here as italic.

So this paragraph that is inside this header,

but not this other paragraph

that is also inside of a header.

So we came up with the solution

of selecting only the paragraphs inside of headers

that are inside of articles.

Remember that.

The problem with this is that this essentially

encodes the HTML structure into our CSS selector.

And that is not a good idea.

And so instead we will now basically name this element here

with something called an ID.

And so with that,

we can then avoid writing a big

and a long selector like this.

So let's go here.

And the paragraph in question is this one here.

And so now we can specify a special attribute called an ID.

So the attribute is called ID.

And now let's simply call this one Author.

So remember this name here, Author.

And so now this element here,

this paragraph is basically called Author.

And so now in Or CSS, we can use the Hash selector.

So this one, which is in fact, the ID selector.

So Hash and now the name of the ID that we just specified.

And now here we can,

one more time set the font style to italic now, right?

And now we can get rid of this code here

because it's no longer necessary.

Now, instead of deleting this code,

I actually want to keep it here.

And so we can do something similar as we did in HTML,

where we wrote comments.

Remember that.

So here we wrote some HTML comments to keep this code here

without being actually active, right?

And so in HTML, we can do the same.

It just works in a different way.

So in CSS,

we write a Slash then the Star

and then from this place on

everything else will be a comment.

So we need to close this comment

because of course we want this code to be active.

And so we write now the opposite.

So Star and Slash.

So now only this is gray

and so only this is the comment.

So if I save this now,

then you see that in fact, that only this text,

so only this paragraph is italic and not this one.

Let's actually add another style here.

So another declaration.

And let's set the font size to 18 pixels.

So make it a bit smaller

because remember how the other paragraphs are 22 pixels big.

And indeed this one here got smaller

and all the other paragraphs,

including of course this one here, stayed the same.

Now let's do something similar to the copyright text here.

So this one, and with that,

we will then replace this CSS rule right here.

So we can again, comment it out the way I just did it,

but let me actually show you a nice VS code trick.

So in order to comment a code

that you previously selected like this,

all you have to do is to hit Command or Control + Slash.

So I will do that now.

And so you see that it automatically

edit these comments here, right?

And if I then hit Command or Control

on windows plus Slash again,

then it turns the comment back off.

So I can go back and forth between these two modes.

So if we reload this now,

of course it will be back to 22 pixels.

And so let's go to our HTML and give this one a name.

So a name using the ID attribute.

So ID, let's say copyright.

Let's then select this text,

copy it and just paste it here.

And remember we use the ID selector like this,

plus the name that we just specified,

and let's go back to a font size of 16 pixels.

And here it is.

So it worked once again.

Now, besides the ID,

there's actually another way of giving elements names,

which is by using the Class and instead of an ID.

So we specified the ID attribute here

to give this element a name,

but we could also have used the Class attribute.

Now the big difference between IDs and Classes

is that we are not allowed to repeat ID names,

or in other words,

we can only use each ID name only once.

So it will not be allowed to now add an ID of copyright

to something else.

So I could not for example,

now go here and add the ID of copyright.

So this would actually be invalid HTML.

So we are not allowed to do that.

And so if we need to reuse a name multiple times,

then we need to use Classes for that.

Okay.

So let me show you an example of using Classes.

And so what I want to do now is to style these authors here

of these three related posts in a different way.

So basically that's this P-element here

and this one and this one.

And so again,

I can now not use the ID of say related author.

So instead I need to use the Class attribute.

And let's call it related-author.

So in CSS,

it is a convention that if we have a Class or an ID name

with multiple words,

we separate these words by Dashes like this.

You could also use Underscores for example.

So that's also valid,

but it's just a convention in CSS

to always use Dash like this.

Okay?

So anyway,

let's now grab this here

and paste it to all these paragraphs.

So related-author three times.

And so now let's go to our CSS

and style all the elements that have this Class.

So for the IDs, we used the Hash to select them.

And for Classes, we use the Dot.

So this is the Class selector.

Okay?

So related-author.

And let's say that here we want

the font size to be 18 pixels, let's say.

And let's also specify a new text property

that we didn't learn before, which is the font-weight.

So this one we can use to make text bold, for example.

So as you saw, maybe here, there are multiple options.

We can use some numbers, but we will use that later.

For now, let's just use a keyword, which is Bold.

So let's save it to see the results.

And indeed now only these three paragraphs are different.

So they are bold and they are smaller

than all the other paragraphs.

So of course in the HTML, they are still paragraphs,

but now they got these additional styles here, right?

Now maybe you are wondering something here now,

which is that we are now in fact,

selecting these paragraphs multiple times, right?

So we are selecting this paragraph here, in fact, right?

But we are also selecting it here

and we are selecting it actually also up here.

So three times now we selected this paragraph.

So you might be thinking

which one of these gets applied actually.

So isn't this like some kind of conflict?

Well, the short answer is

that actually all of these selectors do apply.

So all of these three rules

of the three selectors do in fact apply.

But I will explain more about how all of this works

and why it works this way in an extra video,

because this is something really important

that you will need to understand in order to master CSS.

And so this topic deserves a special lecture on itself,

which will be a bit later in this section.

But now moving forward here,

let me now actually give you a small challenge.

So what I want to do is to remove the bullet points

of only this list here.

So remember that we created a list for this.

And so of course, this one has bullet points right now.

So I want you to select only this list here,

only this element and remove it's bullet points.

Now we never removed any bullet points.

So let me show you how it works.

And for that, I will now in fact,

select all the unordered lists.

So here we use the property list-style

and set it to the keyword of None.

Okay?

So the bullet points disappeared from this one,

but also from this one.

And so, as I said,

I want you to now select only this element here

and then remove the bullet points in there.

And I want you to do this by using a Class called Related.

Okay?

So let me comment this one here.

And so yeah.

Create a Class on this element on this list here

and then remove the bullet points from this one.

And I will see you back here in a minute, once you are done.

Okay.

So let's start by going to the HTML.

And then of course this here is the UL

that we want to select.

And remember how I wanted you to use a Class.

And I will explain a bit later why.

So we used the Class here called Related,

and now we go to our CSS

and select this element with the Class that we just named.

So of course, using the Class selector like this.

And now only on this one,

we say that list-style should be None.

Give it a save,

and so this one still has the bullet points

and this one doesn't.

Great.

So we did this because we don't want this list here

to actually look like a list.

It should only semantically be a list of related posts.

But anyway, let's now go back to our HTML

and talk a little bit about why we used a Class

and not an ID.

Because in fact,

there's only one list element of Related posts, right?

So we could easily have called this an ID, right?

Because remember that the IDs are four names

that are only used once,

while Classes are used

when we want to give multiple elements the same name.

So when we want to style multiple elements

the same way in CSS.

So knowing about that,

why did I tell you to use a Class and not an ID?

Well, the reason for that is that usually in the real world,

we never use IDs.

We always use Classes because by using Classes,

we are prepared for the future.

So imagine that we used in fact, an ID of Related,

but then at some point later, somewhere on the page,

we wanted to add another list of related posts.

Maybe we wanted one in the sidebar

and we wanted one in the footer.

So imagining a more complex layout.

That would completely be possible, right?

But then if we had used an ID of Related in the beginning,

we would now have to go back and change that ID to a Class

so that we could now add another list of related posts.

And so that would be a source of error

if we've, for some reason, forgot that.

And we would also have to go to our CSS

and change that there.

So at first it was an ID of Related,

we would now have to come back here and change it to a Dot.

So to the Class selector.

And while this doesn't seem to be a big problem,

it can actually lead to bugs.

So to errors in the code if we have a really big project.

And so by default,

we simply avoid this potential problem

by simply always using Classes.

Okay.

Now I will still keep this ID here for you.

So this ID of copyright and this ID of author,

just so you also know how to work with IDs,

but in the future,

I will actually no longer use IDs

because as I just said in the real world,

we simply always use Classes,

even if we only use the Class name once.

Because by doing that,

we are making our code ready for the future

and ready for potential changes.

Okay.

So I hope that made sense.

And you can now go ahead if you want

and name some more elements

and style them in different ways,

if you feel like it.

So basically to practice this a little bit,

and then if you'd like,

you can come with me to the next video

where we will start working with colors.