[WIP] Hi! This is the first post for a series of CSS tutorials I'm making, so amateur coders on here can learn some more about CSS! Let's get into roots and variables!

Think of CSS variables as placeholders for values you might use repeatedly in your code. Instead of hard-coding specific values like colors or sizes directly into your styles, you assign them to variables. This way, if you need to change that value later on, you only need to update it in one place—the variable—rather than hunting down every instance of that value throughout your code. It's like having a control panel where you can tweak settings for your entire code without having to manually adjust each element.
Example given!

:root {
--blue: #0000FF;
}
h1 {
color: var(--blue);
}

If you want to change the color of the "h1" element, you can do so from the root.
What makes this so convenient is that you don't have to re-copy and paste the hexcode. If you have multiple elements using the same --blue variable, you would only have to change it in the root, as opposed to replacing every singular hexcode. This might be an example with just one color, but other properties can be added aswell.

:root {
--image: url('justanexample.com/420.png')
center center fixed;

Here you can see I used an image instead of a color, which is totally possible aswell! You can use it to add images as backdrops for your headers, tables and dividers!
I use it in my own den, shown here:

See that wooden texturing? I did that using a root aswell! The image I used had a huge link I had to copy constantly.. I was NOT up for doing that. So I put it right into my root!