So how did it go? We're you successful?
Let's solve this together now.
Well, first we have to decide
which list type you want to use here.
As I said, if we have a specific order,
an order list of your choice,
otherwise we can go for the unordered list.
Well, if you look at the tasks we have in our paragraphs,
then I think an order list would be the right way to go.
Because first we should repeat what we learned,
then we should do the exercises,
then we should dive deeper,
so we should follow this order.
Therefore, your ordered list is our way to go here.
Step one
and now we need what three list items,
item one,
item two
and item three.
Now we just need to add the content
to these list items and
should be copied the paragraphs to,
at the moment, this is not required.
If the items only contain the challenge, so this plain text
then it's totally fine to just cut out this text and add it
as list item. This is semantically completely correct,
which has to have this list item, now
which contains some text.
Let's do the same thing for the second.
And the third list item here,
this and let's delete our free paragraphs.
Let's quickly save this
and now before our list being completed,
let's go back to the website
and you see these three
challenges displayed as list items.
So task solved.
Let's now continue with styling our list.
And the first thing I want to tackle are
these numbers here.
So just one, two, three
indicating that we have an order list.
We know that this order list is more a semantic topic.
Therefore, I don't think this looks good.
So let's get rid of these.
For that if we look at our coding here,
we could say that each of these single list items
should have these numbers removed.
So let's go to our full-week, CSS file here,
select the list items.
And now say that in our list,
the list style property,
which defines what the list should look like
should be set to none.
If we save this, we see that
the numbers here disappeared.
And by the way, if we go back,
you also have other options for your list style here.
You could, for example, set it to square.
Just to give you one example.
If you do that, you have these squared bullet points here.
So you can tackle this as you prefer,
but I want to stick to none at this stage.
However, I'm not totally happy
with the way we applied this property now
because if we go back to our website
and to today's challenge, now inspect this page.
You might remember from the last module,
when we talked about this paragraph
and specifically inside this paragraph,
this anchor tag here,
by the way, as you see,
we have some code injected here by
our life server extension now
it's this script element here.
You can ignore this for the moment.
We'll explore this later in a bit more detail
in the JavaScript part of this course.
However, coming back to this anchor tag,
you might remember that we talked about
specific rules, which get applied to this element.
Although we didn't specifically select this element.
An example was this paragraph here, this one.
So the paragraph where this
anchor tag sits inside.
So if you would un-select the
specific font family applied to
this anchor tag here,
you see that now this rule here.
So the font family would be applied
to this anchor tag,
not the best example here, of course,
as it is the same font family.
But now you see that this is strike through.
If I select this again,
you see that this is strike through.
So it doesn't get applied from this element.
It sits inside from this paragraph,
but it gets directly applied
because of the rule we made
specifically for this element.
I mentioning this because if we explore our full week,
once again and now check our
ordered list and the list items.
Well, we basically have the same structure, right?
We have list or lists,
which would be equivalent to the
paragraph of the other page.
And inside this list, we have our list items,
which could be the anchor text.
So to say
at the moment we applied
the list style property
to each of the list items.
But what if we changed this
and now not apply this list style
none property to our single list items,
but one level up, maybe to our ordered list.
So again, here list style, none.
Let's save this
and let's now comment out this part.
So commenting out means that we want to
keep the code in here for later reference,
but that the code is not applied
to our website at the moment.
And to comment out of things,
you can simply go up here to code preferences,
keyboard shortcuts,
and now you can simply search for comment.
And here this
toggle line
common shortcut
is the one you typically use.
So this is the key binding I'm currently using.
You can edit the key bind in here
by clicking on to this pencil.
But this is the default one I have in here.
So with this shortcut, I can also select this,
use the shortcut and comment this out.
You see that's the syntax to comment things out.
So it's this slash anti-asterisk and then asterisk slash.
So if we save this, we go back,
you see that our numbering is still gone.
And if we inspect this,
you see that the ordered list, now
has this list style none rule applied
and our list items,
also have this it says it is
inherited from OL thing here,
but we basically kind of receive this from this element.
Our list elements are nested inside.
Now what happens if I comment this back in
and change just to square as we just did it
and save this
well then the squares are back.
So then this rule of our order list
list style none is not applied somehow.
And what if I take this list style non thing
and add it as a second rule.
So we have the same property twice,
but with different values, what wins then?
Well, let's check this.
Well then list style none wins.
You see down here in our dev tools,
the list style square rule is striked-through,
but the list style none wins,
and the style from the ordered list
also doesn't win.
So what is going on here?
Why are certain rules applied?
Why are some rules applied,
which we use on a higher level elements.
So to say, and why is here
the second rule winning and
not the first one.
These are all questions which require us to dive
a bit deeper into CSS.
And the first step now is that we will investigate the
relationship between our list,
empty ordered list,
and the body element in a bit more detail.