this is a brief tutorial to introduce you to the wonder if defining :root variables in your css file.

this tutorial assumes:

• you understand the basics of html/css usage and syntax.
• you understand how css relates to html.

does YOUR css look like THIS?!??!

body {
    background-color: #66b3ff;
    color: #f2f2ff;
    font-family: 'fonty mcfontface', monospace;
}

div {
    background-color: #161654;
    border: 2px solid #f2f2ff;
    color: #66b3ff;
}

p.style-1 {
    color: #161654;
}

to be clear: there is NOTHING wrong with this. this works. this is good! no idea what it looks like rendered, cuz i am making shit up for this tutorial, but there is nothing wrong with the format, it's totally normal and functional css.

but it is a tad.... JUVENILE. notice how we have 3 different hex colors to keep track of? and 3 is a low number. looking at #161654 means nothing unless you're insane. you could maybe guesstimate that #f2f2ff is a very light blue. but who has time for that!!

furthermore: what about when you want to update a color? you COULD search and replace, and there is nothing wrong with that. however not all text editors have this option, and i forget the shortcuts all the time.

there is a way in css to create variables, or "labels", for your colors.

at the very top of your file, you're going to use the :root selector. this is where we can declare global variables for css styling! here is our example:

:root {
    --light-blue: #f2f2ff;
    --mid-blue: #66b3ff;
    --dark-blue: #161654;
}

this snippet would go at the top of our code from before, and i'll refactor the uses of these colors. to use a variable, you call the css var() function:

:root {
    --light-blue: #f2f2ff;
    --mid-blue: #66b3ff;
    --dark-blue: #161654;
}

body {
    background-color: var(--mid-blue);
    color: var(--light-blue);
    font-family: 'fonty mcfontface', monospace;
}

div {
    background-color: var(--dark-blue);
    border: 2px solid var(--light-blue);
    color: var(--mid-blue);
}

p.style-1 {
    color: var(--dark-blue);
}

yay! now we have an easy-to-maintain color palette.

these variables can apply to other values, too!

let's say that we have a handful of fonts for a website. let's say we have three: one for the headers, one for most everything else, and then a third for finer print. our css could look like this:

body {
    font-family: 'fonty mcfontface', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'angelbaby handwriting', cursive;
}

.other, .misc, .selectors {
    font-family: 'fine print', monospace;
}

wherein we select multiple elements at once just to say they all share a font. again, nothing wrong with this, preference is key, but i want to share these tricks.

or we could do this:

:root {
    --body-font: 'fonty mcfontface', sans-serif;
    --fancy-font: 'angelbaby handwriting', cursive;
    --extra-font: 'fine print', monospace;
}
    
body {
    font-family: var(--body-font);
    ...
    ...
}

h1 {
    font-family: var(--fancy-font);
    ...
    ...
}

...

.misc {
    font-family: var(--extra-font);
}

...

and sprinkle our variables throughout our css file. a bunch of points that all tie back to a single, editable value.

along with var() as a css variable, we have calc(). let's look at basic example usage of calc(): imagine we want an element's width to be just 5 pixels under half the total width available. that could be easily and flexibly achieved like so:

.element-class {
    width: calc(50% - 5px);
}

what makes calc() important is that it allows us to modify some variables a bit. i found this out when i wanted to have a base hex color and use variations for different elements. it wasn't as easy as typing var(--accent-color)de, tacking on two letters to indicate the aa value of a #rrggbbaa color.

it turns out that var(--my-number-var)px does not output 5px. where --my-number-var is set to 5... instead, it outputs 5 px, the whitespace being lethal to functional css.

this final section is mostly a word of warning, or at least where my own struggle remains. i'll probably be updating this soon enough, as i learn more. also because i'm sure i'll nitpick all night.