Thankfully, everything we just saw
is based on certain and clear defined rules,
which control the logic of CSS.
And these rules are based on three key terms.
On inheritance,
cascading,
so the cascading logic
in the term cascading style sheets,
and specificity.
Understanding these three terms
and how they work is crucial
to really know what is going on
in our CSS logic here,
and also helps us a lot
to easily style our webpage.
Let's get started with this inheritance concept.
We saw it already in the developer tools
with this inherited from information.
Inheritance simply means
that selected container rules
apply to descendants.
Selected is important here.
Not all rules are applied to descendants,
which wouldn't make too much sense.
If you, for example, have a width
defined for a parent element,
you'll probably don't want to have all your descendants
to have the same width.
But common sense here really is a big helper
to understand which rules
are inherited and which not.
So no need to learn anything
like these properties are inherited,
these are not.
And if we go back to the project,
we saw this inheritance concept
in action a lot of times.
For example, here, in the body,
we defined the color,
and we saw that in our h1 element.
We inherited this color property here
from the body.
Same thing is true,
if we go back to the body once again,
for our text align.
Center rule we added here.
This rule is also inherited
by our ordered list, for example.
So if you go back here, you see inherited
from the body text align center.
So this is this concept.
If you have a container,
then elements nested into this container
inherit certain properties.
With this inheritance logic being in place,
another logic is important.
That's this cascading logic in CSS.
Cascading means that multiple rules
can be applied to the same element.
Also something we saw in action in our project.
If we, for example, go again to our ordered list here,
we know that the ordered list inherits
the text align property and the color property.
So these rules are applied from the body,
so to say, to our element.
But at the same time here, in our ordered list,
we added this list-style none property.
So this means we have one element
with different rules being applied.
One of the rules being applied directly to the element,
the other one being inherited from another element.
The cascading nature here
is therefore important to make this possible.
Otherwise something like inheritance,
well, wouldn't take place.
The cascading logic is important
for another core concept in CSS, though.
For this, let's go to the code
and let's maybe delete these unrequired color codes here.
Don't need these anymore.
And now let me comment back
in this list-style none property.
And let's just focus onto this list here
and forget about the ordered list for a moment.
Here, we have the same property twice.
List-style, list-style,
square, and none.
Now what's happening is that,
if we also comment out this here,
if we go back, we don't have any list-style applied.
So these square bullet points are not displayed.
Why is this the case?
Well, because list-style none
wins over list-style square.
What happens if we switch the order?
So if list-style none is the first one
and afterwards comes list-style square.
Let's see.
Now the list-style square rule wins.
Why is this the case?
Well, because the cascading logic
not only means that multiple rules
can be applied to an element
from different starting points,
so from inheriting the rules from the body
and applying it to the element directly,
but also from inside such a selector, so to say.
And if this is the case,
so if you have this rule multiple times,
well, then always the latest applied rule wins.
So the order matters, so to say.
Well, if we follow this logic,
then if we comment in our ordered list here.
And if you position this ordered list
below our list items,
then we first define the styling for the list items.
Here list-style square would win.
But afterwards, so later in our order,
we have list-style none.
Let's quickly format this, by the way.
We have list-style none.
So if the cascading logic is
that the latest applied style wins,
then we shouldn't have any bullet points now.
Let's see if this works.
No, it doesn't.
So what is going on here now?
Well, for cases like this,
we have another core concept in CSS,
and this is specificity.
Specificity means that the more specific selector's rule
wins over the less specific selector.
Now what does specific mean here?
Well, in our code, we have the ordered list
and the list item.
If I select the ordered list,
I directly select this specific element
and children of this element
can inherit properties.
But if I directly select the list item,
well, this is more specific, right?
I specifically target this element.
Therefore, in such cases,
the more specific selector
wins over the less specific one.
Therefore, the order logic
doesn't play a role here.
Specificity is important
to define which rule is applied.
We can still position the ordered list above here, though,
to keep the logical flow in our project.
But here it's important
which selector am I using right here
and right there.
And this logic can also be found
in our project in other places.
As we learned, we actually defined
a color here in our body element,
and this color would be inherited
as it is the case for the h1 element.
For the anchor tag this is not working
because well, the anchor tag
would inherit the color from the body,
but we have a strikethrough here
because, we talked about this,
we have a default color being applied
by the browser for anchor tags, so for links.
So this specific link color,
this specific browser default color,
is more specific, so to say,
than the inherited color.
But what is even more specific
is the direct color we added
in our type selector here,
the anchor tag.
So this is the most specific one,
therefore this color is winning here.
Now, this can be a bit complex
when first being confronted with these concepts,
but you will get used to it
the more you work with CSS.
Always keep in mind this flow though.
We have the inheritance,
which means that certain properties
are applied to descendants of the parent.
We have the cascading logic,
which allows us to apply multiple rules
to the same element,
and also defines that the latest rule
in a specific selector wins
if we have the same rule,
the same property twice or more.
And we have the specificity,
which defines which rule wins in the end,
so which is the more specific rule,
the more specific way to select an element.
So this was a lot of important theory now.
Now it's time to go back
to a bit more of the styling part of this course.
So let's continue with the styling of our website
with keeping these new concepts in mind, though.