Root Scope versus the HTML Element
Tags: html, css
Published: 2022-07-19 01:15:50

**Note prior to reading:**
This article assumes that you know what a scope and pseudo element are.

---

**Reading time:**
10 to 15 minutes.

Download this article for free [here](https://docs.google.com/document/d/1J_rhmgbDqD-INvwqhWOeab56J30Pnwu3/edit).

---


Everything has its root. A place of origin. A point of beginning. And an HTML document is no different. That’s why every single HTML document’s body has to be wrapped inside an opening and closing HTML element. Often, the HTML element is referred to as the root of the document, which is 110 % correct, since that element defines the default “settings” for the page such as the default font size, the default font family and so on. But why even bother about having another term called root scope, if it’s just the same thing as the HTML element?

Well, most people think intentionally that CSS is only used for styling HTML pages, since that’s what it is mainly being used for. But the fact is that CSS can be used to style any type of web document (HTML pages, XML pages, HAML pages, and the list goes on). The root scope is therefore always the same as the document type.

CSS is read line by line from to top to bottom by the browser, which means that last line applies. What I mean by that is that if you for some reason set let’s say the font size of an element to e.g. 16 px (which also happens to be the default font size of the root scope), and you later on set it to any other value than 16 px on the exact same element, that value will kick in and override the first one. That rule is eventually put on hold when dealing with the root scope versus the HTML element (more on that a little later).

When it comes to styling something via the root scope in CSS, it can be done either via targeting the HTML element directly or the by the root scope. There’s a gotcha to this, but more on that a little later.

So, first of all, how do we target the root scope? Well, since this is a pseudo element, we target it is as any other pseudo element in CSS by writing colon followed by the name of the pseudo element. That means we target the root scope by writing `:root` followed by curly brackets, inside which we write our styling.
If we want to set the root font color to red in our HTML document, we would write either `:root { color: red; }` or `html { color: red; }`. There’s no difference between these two, since we’re working with an HTML document. But stick to targeting the root scope by either `:root` or by the HTML element, because otherwise, the gotcha will bite you in the back.

Now I’ve mentioned the gotcha a couple of times, but what is this gotcha I keep mentioning? Before reading any further, open up e.g [CodePen](pen.new) and paste in the following HTML and CSS:


`HTML:
<!DOCTYPE html>
<html>
  <body>
    <h1>
        Hey
    </h1>
    <p>
I’m just a little paragraph sitting here minding my own business.
   </p>
  </body>
</html>`

`CSS:
:root { color: red; }

html { color: green; }`

As expected, the color of all the text is red.
Now, try move the `:root { color: red; }` below
`html { color: red; }`, and see what happens. You might be surprised by the result compared to what you thought would happen; but that’s because you’ve already forgotten what I mentioned above about that the root scope is targeting the document type and not just the HTML element.
This means that the `:root` takes precedence and therefore overrides everything defined by targeting the HTML element directly in the CSS. This is exactly why you must only stick to either targeting the root scope by `:root` or via the HTML element directly. By trying to do it via both at the same time, you’re doomed to run into problems, confusing yourself and very quickly write yourself up in a corner that you won’t get out of without knowing the exact difference between the root scope and the HTML element (and now you have that knowledge in mind after having read this article, you’ll never do it via both at the same time (again), so that puts that problem to shame even before it encounters).

That’s it!

> _- Remember to make your website just a little bit more awesome every day_.