Now that we learned more about CSS class selectors,
there also is some obvious question you could have. You get CSS class selectors and CSS ID
selectors, of course you also got tags and so on but there are cases where you would just use a class selector
once,
should you then use it or should you use an ID selector instead,
when should you use which kind of selector?
Well, let's see the basics real quick. A class selector is defined like this, an ID selector like this,
with the hash symbol
and if we add some HTML code, this class selector would select these two HTML elements on the left,
the ID selector would only select the first HTML element in the snippet on the right,
so this is how they work.
Now let's have a look at when we should use which. The advantage about CSS classes is that they're
reusable,
you can add them to any HTML element which should get a certain style,
they allow you to mark and name things for styling purposes only.
With that I mean that you create these classes only to apply certain styles,
they don't really have any other meaning.
You can use them in conjunction with Javascript as you will see later in the course but that's about
it
and even then, it's often tied to CSS related logic.
So classes are really something strongly connected to CSS and therefore, using a class to styles something
is rarely wrong.
They should be your first pick because other selectors, like for example tag selectors, often have the disadvantage
of giving you less control,
it's easy to mess something up just because you style your h1 tag with the tag selector and you
accidentally style some other h1 tag on the same page in the same way
even though you didn't want to do that.
So only use tag selectors for some generic styles that really should affect all elements of that tag.
Class selectors
on the other hand are always a good choice
and they're the most used selector type therefore. ID selectors can be a decent choice too though. They're
only used once per page or an ID is only used once per page I should say
and therefore, if you get a certain style that really should just affect one element on your page and
never more, using an ID selector definitely is not a bad idea.
However, it's important to keep in mind that IDs also got a none CSS meaning on your page,
mostly the thing that you can link to IDs.
I'll show this on the demo project
in a second.
So therefore using IDs just to apply a style is not really something I can recommend,
use a class instead
even if you only use it once because the ID introduces some other effects which are not horrible or
unnecessarily bad but all is not optimal maybe. So therefore use ID selectors
if you planned on using an ID anyways, if it semantically makes sense but don't just add them because
you want to add some style.
Now let's have a look at what I mean with that linking thing. Back on our page,
if we inspect the HTML code, you can see that on both anchor tags, I actually linked to an ID,
we do this by adding a hashtag and then the name of the ID.
The IDs are then used on the sections and because the sections have a height of 800 pixels, simply
just to ensure that we can scroll on the page,
I can actually show you what these links will do.
If we go back to the page, I can scroll down to the outro section here but I can also click on outro and
then my browser will jump there, because in the URL, it added outro at the end of the URL. This is
one thing that's baked into HTML,
it's not related to CSS at all, has nothing to do with it.
It's a nice behavior,
it allows you to link on a page.
It also means that IDs are not just there for styling purposes though, that is what I meant on the previous
slide.