-: 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 id's.
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 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 our 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 italics, now right?
And now we can get rid of this code here
because it's no longer necessary.
Now, instead of the 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 the 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 fact 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 comment or Control + /.
So I will do that now.
And so you see that it automatically added
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'll 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 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 id's 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 would 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 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,
let's 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 id's, we used the hash to select them.
And for classes we used 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
then 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 its 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 a 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 id's are for 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 id's.
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 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 id's.
But in the future, I will actually no longer use id's
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.