Our website and every website out there
follows a certain HTML structure.
The structure is based on the fact that we have
an HTML opening and closing tag,
which means that our HTML element is the so-called container
of the head for the metadata
and the body for the actual website content.
We learned that we have the indentation as a visual helper
to see which elements are part of another element or which
element is nested into another element.
If we focus on to the body,
we see that the body element here
is nested into the HTML element.
We see that the h1 element,
the anchor and the ordered list here are well then nested
into the body and that our free list items here
are nested into the ordered list.
This structure doesn't only help
to keep our code organized, tho.
It also has a huge impact on the way we write our CSS code
and how CSS rules are applied.
The example we had in the ordered list here
showed us this already.
We had the option to apply the list style,
"none" rule to our list item.
So to each single list item to be more precise here
or alternatively to the ordered list.
Both worked in the end,
but adding the style to the list item as we did it here,
somehow won against the style here in the ordered list.
Something we'll come back to in a few minutes.
But the important thing is that this relationship we see in
our website, so list items nested into an ordered list,
h1 anchor and ordered list nested into the body
and the body nested into the HTML element
is a so-called parent-child relationship.
So we have the list items, free children here,
which are children of what the ordered list as a parent.
The ordered list is also a child of the body tho,
and the body is a child of the HTML element.
Same thing applies for h1 NT anchor tag,
both are children of the body element here.
Now, why am I emphasizing this?
Well, because the logic we solve for the ordered list
with a rule being applied to the parent
and where this rule is also applied to the children,
only works with such structures.
Let's have a close look at this.
And for that, I will go through
the full week's CSS file and comment this out,
and also comment this style out.
As a result, our numbers here are back.
However, in our structures so far in the website,
we made use of this concept
of specific rules being applied to child elements.
So to nested elements.
If we select the body as a thread right here,
we see that the body has this color property applied.
This property is also applied to the bodies' children
with the exception of the anchor tag here,
this has a different color,
we'll discover why this is happening here in a few minutes.
But generally we see that the color is applied
to the h1 element as can be seen down here,
inherited from body color and to the ordered list.
Same logic here.
Let's focus on to the list
and let's check out the list items.
Here, you'll also see that the color property here
is inherited from the body.
So what this means is that rules,
so property value combinations,
which are applied to the parent
are also applied to the children.
So the ordered list here, for example,
and to children of the children, so-called descendants.
This is not the case for all properties
and for all elements, we see this with the anchor tag here,
but generally nesting elements means
that certain rules can be inherited,
so also applied to children and descendants.
Now, things are a bit different
if we go back to our full week CSS file
and now apply a different color to the ordered list.
Let's set the color property
to RGB of 255, 255 and zero.
This should be kind of a yellow tone.
And if we go back,
we see that the yellow color is applied to the list items.
So again if we check this,
we now see that the inherited from body section shows us
that the color property is striped through
because we inherited the color from the ordered list.
So from the parent, not from the body,
which would be an ancestor of our list items.
You don't have to remember all these terms, by the way,
I'm just mentioning this
because you might read this terms.
In the end, you can always remember
this parent-child and here parent-child combination again,
that's the easiest way to come along
with such relations here.
However,
we see that the ordered list color
was added to the list items,
but of course not to the h1 element, for example,
because the h1 element is sitting next to the ordered lists.
So we have the h1 element, opening closing tag.
Then we have the anchor tag
which we ignore for the moment.
And then we have the ordered list.
So all these elements are not nested,
but sitting next to each other.
So adding a property to other elements,
only works if we have such nested structures.
However, if we now add the color property
also to our list here,
and now we'll take RGB maybe, let's say, 100, zero,
just as reddish tone here.
Then you see it, that all list items are red again.
So again, somehow defining the color
on the specific list item seems to override
the definition in the ordered list.
So in the parent,
we can again see this here in the def tools
here in the inherited part from the ordered list,
the color is strike true because we define the color
directly on our list item.
This is also the reason why our anchor tag here
has a different color.
Let me first comment this out here quickly maybe,
and also the same thing right here for the color,
because the anchor tag has this purple tone.
Well, if we select the anchor tag,
we see that in inherited from body,
the color is strike true,
because we specifically defined the color
for this anchor tag.
Therefore, this color wins.
If you would unselect this,
then it doesn't become grayish or this black tone
that we have, it becomes blue.
Why? Well, because here we have a specific color definition.
This color web could link here,
which is a specific default color that is applied
by the browser for links.
So that's interesting here,
we have the situation where we have two children,
anchor tag, and ordered list, for example.
Both children of the body.
In case of the ordered list,
the color is overtaken or inherited.
For the anchor tag this is not the case,
as we seem to have some kind of a default color
for anchor tags added by the browser.
However, this is what it is for the moment.
We'll of course, dive deeper here in the next minutes.
Let's now go back to our full week CSS file though,
and comment back in our list style,
none property value combination here to well,
remove this list style from our list.
If we do that, then the numbering here is gone.
We now have this list style is set to none.
The default list style type is strike through,
and therefore our list item here, inherits this none style.
So this all seems to be a bit random tho, right?
We see that we can define styles on different elements.
Some things get inherited, some things get not.
We see that we can override specific styles.
For example, if I comment back
in our list style square property here,
then we see that the list style is back again
with the square bullet points.
Although we actually set
the list style here on our ordered list.
So, what is the logic behind that?
This is what we will explore in the next lecture.
So we'll dive deeper into the internals of CSS now.