An alternative would be to use the concept of classes.
Classes allow us to group specific elements together
where the same styles should be applied.
How does this work?
Well in our full week HTML file,
we could say that all these paragraphs in here
have a specific class.
So class, is again an attribute
which could be daily goal.
For example, if we use this now
and edit right here,
there, and right there,
then we have this class applied multiple times in contrast
to ID classes can be used multiple times
and then a full week CSS file
we cannot comment out our Combinator here
and now refer to the class with the dot.
That's, how we refer to class names
and refer to our daily goal class in here,
which should actually have the same rules applied
as we had it before.
And if we go back, you'll see, we have,
now this class also here in our dev tools and the margin
and the color is still applied.
So this would be one of the alternatives here,
but what if we comment in now this Combinator here,
by the way, if we do that, save it.
What happens website is still styled,
but which style was applied?
Well, the daily goal style was applied here.
See it in our dev tools
because here specificity comes into play again.
The normal element selector is less specific
than a combination would be because the paragraph selector,
for example, here, this one would apply to all paragraphs.
The main P Combinator here only applies to paragraphs,
which are descendants of the main element.
So it's more specific.
And the class here is even more specific
because only elements with this specific class
have this certain style applied.
So as we talked about it, the concept of specificity here,
again, follows common sense.
Therefore, it's pretty easy to remember
once you get used to it
still, I want to keep
the currently not working Combinator here
because we could use our classes
for something different here.
I mentioned that it would be great if we could have
something like to highlight goals.
So very important goals we should achieve
in our full big HTML file. This could, for example,
be our second goal here.
So to do the exercises and also this one,
the third one to dive deeper,
these could be very important goals because if we practice
what we learned, we made sure we understood what we learned.
And if we didn't dive deeper,
we can do the next step.
For this, we can also use a class,
but not being applied to the paragraph, of course,
because I want to highlight the entire list item here.
So let's delete all our classes right here,
this one
and that one.
And let's not add the class to the specific list items.
So again, we can combine or select specific elements,
which should have a common style.
So let's say class should be highlight goal here,
for example, and apply the same class here to this list.
Item class is highlight goal.
Now what should happen to this highlight goal?
Well, at the moment, in our full week CSS file,
we have this background color
being applied to the list items.
And as we just learned,
the type selector here is the least specific selector.
Therefore, if we now take
the background color property
and renamed daily goal to highlight goal,
and also delete these properties in here,
paste the background color,
and now hover over it to open this help,
but here in visual studio code,
and let's make this maybe slightly more reddish.
It's just a slight change like this.
So we have 2, 2, 2, 4 1, 2, 4, and 1, 1, 1 year.
If we save this, go back,
you see if we now have a slight darker background color for
these two goals, maybe a bit to slide, to be honest.
So let's maybe put this a bit more to the right.
Like this. So 2, 2 6 1 1 5 1 0 1.
Yeah. Now I think it's more evident.
Now we have these two goals highlighted a little bit to make
sure that these are our core goals.
And again, we used another selector here,
which is more specific than the type selector here with the
list item, therefore for the other list items,
which don't have the specific class applied
our well, default color, so to say 40 list items is applied,
but with the more specific class selector,
we added the background color to the elements which have
this selector applied
With that we improved our styles a lot.
What is still don't like here,
is the gap between our header and the main part here.
So we should add a bit more margin
to make sure this increases
for this in our full weeks CSS file
on top, maybe
we can use the header pipe selector here
and also add margin bottom bit more here of 64 pixels.
Let's see. Yeah.
I think that this looks a lot better
and what we could also do as well
We could go with the ID selector here,
maybe for the description of our challenge.
As I said,
both alternatives are possible here,
but as we want to practice as many selectors
and combinators as possible,
we'll go for the ID selector here
for D descendant Combinator there
and at the bottom,
we'll go with the class selector.
With this we're coming closer towards
the end of this diving deeper module,
there is just one less core concept missing.
We should have a look at.