We added our CSS variables
to the HTML selector.
The reason for this was that the HTML element
is the so-called root element of our HTML file
and variables are only available to elements
which are nested into the element that holds the variable.
While, as the HTML element holds all other elements
in our project,
the variables are available for all elements in our project.
Nevertheless, with the HTML selector,
I would like to take the chance to have a look at
three selector types which you probably might come across.
The first one here is, well, the HTML selector.
The second one is the :root selector,
written ":root"
a so-called pseudo-selector.
And finally, we have this asterisk selector.
The HTML selector selects the HTML element,
which is the so-called root element of an HTML file.
This basically means that,
CSS rules that we add to the HTML selector
are applied to the HTML element
and also inherited to nested elements
inside the HTML element.
This was the logic we used for our variables.
Now, I said that the HTML element is the root element
of and HTML file.
So, why do we have this :root pseudo-selector?
Well, the :root pseudo-selector
selects an element which is the root of the document.
And turns out that, well,
CSS rules are, in this case,
applied to the root element and inherited to nested elements
inside the root element.
If you closely look at the text
between the HTML selector and the root selector,
it's basically the same.
But there are two things to keep in mind
when seeing these two selectors.
The first one is, that the HTML element
is the root element of an HTML document.
This is true.
So, for HTML related projects,
a web table, for example,
both selectors will basically do the same.
There are other areas though, where you can us CSS.
CSS cannot only be used related to HTML
and there you specifically might want to target
the :root element.
Therefore, you have this :root selector
to select the first element in a specific document type.
In the case of HTML,
well, HTML is the root element.
Therefore, these selectors are basically the same.
One thing to note though,
is that the so-called specificity,
we talked about this,
of the :root selector,
is higher than the one of the HTML selector.
Which doesn't play a big role in our case though.
Finally, we have this asterisk selector though.
The third one.
Well, this selector simply selects
all elements of the HTML document.
And this means that the CSS rules are directly applied
to all elements.
Specificity still plays a role though
but the difference between the HTML and :root selector
versus the asterisk selector, is that,
for the HTML and :root selector
the rules are inherited by nested elements.
Whereas, the asterisk selector
directly adds the rules to all elements
inside our HTML document.
This was just an important info to conclude
this variables part of this module.
As I said,
it's not too important for us at this stage
but if you ever come across
the HTML, the :root or the asterisk selector,
you can refer to this slide
to remember what the differences are.
With this,
I will now conclude this variables part
and dive into another new CSS topic.
Which is also great when it comes to
create nice looking websites.